※スマホ対応はしてません。

“Failed to communicate with the Amplify CLI”と出たので手動で繋いだら進んだ。

カテゴリー: JavaScript

まとめ

  • Windows の WSL で実行中
  • amplify pull 実行
  • “Failed to communicate with the Amplify CLI” エラー
  • DevTools > Network > 該当リクエスト > 右クリック > Copy > Copy as cURL (bash)
  • WSL のターミナルで実行

どうして

調べてないけど Amplify のサイトが CLI へ接続するのに 127.0.0.1 を参照していて、これが WSL だとうまく動かないっぽい。

対応

127.0.0.1 宛のリクエストを手動で送る。

幸い我々には DevTools がある。Network タブで該当のものを探して(失敗して赤くなっているのですぐわかる)、右クリックから cURL のコマンドとしてコピー、ターミナルで実行します。

DevTools NetworkパネルでAmplifyの失敗リクエストを表示したところ。赤くなっている。

右クリックからコピーできるので、cURL (bash) を選んでコピー。こんな感じ:

curl 'http://127.0.0.1:4242/amplifyadmin/' \
  -H 'Referer: ' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) …' \
  -H 'Content-Type: application/json' \
  --data-raw '{…}' \
  --compressed

これをどこかのターミナルへ張り付ければ CLI が動き出す。

おしまい

思ってるより WSL 人口少ないのかなあ。

とっぴんぱらりのぷう。

参考

Overridesで本番環境のJavaScriptをデバッグする(ひとり DevTools Advent Calendar 2020 – 24日目)

カテゴリー: Web

最終日、24 日目の記事です。

本番環境でしか出ない不具合がある、format とブレイクポイントでデバッグした、たぶんここをこうしたら直ると思う、でも確証を得られるまでデプロイはしたくない……そんなときに。

本番環境の JavaScript を置き換え書き換えてデバッグすることができます。一言で言うとローカルプロキシです。

なんでもできるようになるけど本当に本番サーバーに置いてあるファイルをいじるわけではないので安心です。まあサーバー側で検証とかが甘いと変なデータが API 経由で入っちゃうかもしれないのでそこら辺だけ気を付けて。

先にまとめ

  • Source → Overrides でローカルプロキシ
  • 任意のファイルとマップはできない、サーバーで公開される構成と対になる
  • ln 使えば任意のファイルとマップできる。ビルドするプロジェクトでも使える

試す

どこのサイトでも後述の手順でやれます。

いまここ Ginpen.com で試すなら global.js がおすすめ。CSS は styles.css?0000 みたいなやつです。

Overwrite を使う

  1. Overrides 有効化
    1. Source パネル → 左側サイドバー → Overrides
    2. Select folder for overrides で適当なフォルダーを選択
    3. DevTools にアクセス許可を与える
  2. 目的のファイルを手元にコピー
    1. 目的のファイルを Sources パネルで開く (Ctrl+P や左側 Page タブなどから)
    2. 適当に編集(空白を追加して削除とか)して Ctrl+S で保存
  3. 編集して試す

選択したフォルダの下にホスト名でディレクトリーが作られ、その中でパスに合わせてファイルが保存されます。

Overrides 機能で保存しマップされているファイルには各所で紫色の丸ぽちが付くので見分けがつきます。また Network パネルで警告表示があるので何か override してるなーというのがわかります。

Overrides した様子。タブやツリーのファイル名部分に紫色の丸ぽちが付いている。また隣の Network パネルには警告アイコンが表示されている。

一度保存した後なら編集は必ずしも DevTools で行う必要はありません。外部のエディターで編集しても即反映されます。ファイル名部分を右クリックから “Open in containing folder” で、OS のファイラーで開けます。

Elements パネルで CSS 編集

ちなみに Sources → Filesystem タブでマップした場合と同様、ローカルファイルと紐づいている場合は Elements → Styles タブで編集したスタイルは即時 CSS ファイルへ保存されます。

Overrides 利用中の Elements パネルの様子。ファイルに紫色の丸ぽちが付いている。

Filesystem タブについてはこちら。

差し替えを停止、一時停止

Enable Local Overrides のチェックを外したりフォルダーを Remove したりすると、再びネットワークから取得するようになります。保存したファイルは残ります。

該当ファイルを削除 (右クリックからDelete) しても、もちろんネットワーク利用に戻ります。

ビルドしたファイルをデバッグ

さて牧歌的な構成ならいいんだけど、ビルドしてひとつになったファイルはそのままひとつの巨大なファイルとしてディスクに保存されます。当たり前だけども。

このままだと編集しづらいので、整形してせめて人間が見やすいようにするか、開発環境のファイルと ln でリンクさせるという 2 通りの解決方法があります。

整形

巨大なままでも良ければ Sources パネルでソースコードが表示される主ペインの左下、整形ボタン(”{}” みたいなやつ)を押すと改行とか良い感じにしてくれます。

こちらは簡単。

開発環境のファイルとハードリンク

こっちはちょっと面倒です。

Windows は知らないんだけど、WSL を含む Linux や macOS ならコマンドラインから ln (link) でファイルのハードリンクを作成できます。(同じファイル実体を 2 か所から指せる。) これを利用し Overrides のファイルも開発環境の出力ファイルへリンクさせることで、開発環境のコードを本番環境で動かすことが可能になります。

例えばこんな構成とします。

  • サーバー上のファイル – http://localhost/static/js/bundle.js
  • Overrides で保存したファイル – ~/overrides/localhost/static/js/bundle.js
  • 開発環境の出力ファイル – ~/myProject/dist/static/js/bundle.js

こうやって ln します。

$ cd ~/overrides/localhost/static/js/
$ rm bundle.js
$ ln ~/myProject/output/static/js/bundle.js

あとは出力ファイルがうまいことマップされれば、デバッガーも元のソースコードを表示してくれます。べんり~。

webpack でビルドしたファイルをリンク

問題は、ln でリンクするからにはファイル出力していることが必要だということです。そりゃそうじゃ。

こないだの VS Code で JS をデバッグする記事でも書いたんだけど、webpack-dev-server はデフォルトではメモリー上にファイルを持つので writeToDisk オプションが必要です。CRA は eject とかが必要。

Next.js は next.config.js の設定でやれそう、だけどやり方がわかりませんでした。webpack-dev-server じゃなくて http-proxy-middleware というのを使ってるらしい。

その他

JavaScript コードを動的に書き換える

これ Filesystem でマップした場合も同じなんだけど、Sources パネルでファイルを編集すると画面の再読み込み不要で即時反映されます。ちょっとずつ調整みたいなときに便利そう。

本番環境のサーバー側 Node.js をデバッグする

さすがにやったことないけどやろうと思えばやれます。(Overrides は関係ないです。)

詳しくはこちら。

おしまい

あんまり良くないと思いつつ必要に迫られて本番環境のデバッグをするなどしています。いやたまにね、極まれにね!

勝手に他人のサイトをデバッグすることもできます。

参考

DevToolsを日本語化するにはMS Edgeを使う(ひとり DevTools Advent Calendar 2020 – 23日目)

カテゴリー: Web

23 日目の記事です。

Chrome の言語設定を変えるとメニューなどが日本語化されますが、その状態でも DevTools は英語のままです。Chrome ではできないんだけど、中身が Chromium になった新 Edge なら DevTools も日本語で利用できます。英語苦手な方はこっちでどうでしょう。

Edge のダウンロード

Mac 版は 2020 年 1 月にリリースされました。Win は最初から入ってます。

日本語の DevTools 。Rendering パネルの各種設定の説明も全て日本語になっている。

設定

最初から言語を反映する設定なので、日本語で使ってれば DevTools も日本語になっているはず。

なっていない場合は、以下の手順で日本語化します。

  1. Edge を日本語で使う設定にする
    1. Settings → Language (edge://settings/languages)
    2. Add languages から日本語を追加
    3. 一覧に追加された日本語の “…” → Display Microsoft Edge in this language
    4. Edge を再起動
  2. DevTools の言語をブラウザーに合わせる
    1. DevTools 設定 → Preferences
    2. Appearance → Match browser language をオンに

Edge DevTools の設定画面。

DevTools がすぐ再起動して表示の言語が切り替わります。

逆に英語で使いたい

元の英語で使い続けたい場合は Match browser language をオフにします。そうしたい場面は思いつかないけども。

Chrome は……?

件の設定がありません。なんでー。

Chrome DevTools の設定。Match browser language の項目がない。

ブラウザー側の言語設定が Edge と Chrome で違うからかな。同じように見えるけど。

おしまい

DevTools で利用できる言語は英語や日本語の他、中国語、フランス語など 10 言語とのこと。Windows や Edge が対応している言語と比べると少ないけど、でもありがたい。

Chrome にも入ると良いなあ。

参考

VS Codeの中でブラウザーを開いてCSS開発(ひとり DevTools Advent Calendar 2020 – 22日目)

カテゴリー: CSS

22 日目の記事です。

VS Code はウェブ開発に便利だな~、いっそブラウザーのタブも表示できないかな~、そう考えのあなたに朗報です。できます。

題名のとおり MS Edge を使うんだけど、macOS など Edge を導入していない場合は Chrome で代用できます。

デモプロジェクト

よければこちらご利用ください。昨日のに追加しました。サーバーは npm run start ないし node server.js で起動します。

本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。

Microsoft Edge Tools で VS Code 内にブラウザーの画面を開く

こちらがウェブページの画面と Elements パネルを VS Code のひとつのタブとして表示できるようにする拡張です。VS Code と同じく Microsoft 謹製です。大丈夫です、Mac でも使えます。

  1. インストール
    1. VS Code サイドバーの Extensions (Ctrl+Shift+X) を開く
    2. “Microsoft Edge Tools” (by Microsoft) を検索(上記のもの)
    3. インストール
  2. 開く
    1. サイドバーの Microsoft Edge Tools を開く
    2. “+” の Open a new tab ボタンを押す

Edge が用意されている環境であれば、そのウィンドウとは別に VS Code で Edge DevTools というタブが開きます。空の画面も表示されているはず。アドレスバーに URL を入力して Elements パネルで遊んでみてください。

なお開くと最初は about:blank が表示されるんですが、任意の URL へ変更可能です。後でやりましょう。

Mac で Edge をインストールしていない場合は後述する「Mac でやる」の方法を試してみてください。

試す

デモプロジェクトなら npm run start でデモ用のウェブサーバーが起動します。http://localhost:8080/ を開いたタブの URL へ入力し移動してください。

VS Code 内に localhost のページを表示している様子。このまま DOM ツリーを触ったり Styles ペインで確認したりできる。

CSS ファイルをエディターで開くようにする

せっかく VS Code の中で Elements パネルを表示してるのに、初期状態ではソースコードは見えるだけです。Elements パネル Styles ペインでスタイルの定義箇所(ファイル名と行番号)をクリックしたら、VS Code で即開けるようにできます。

  1. ファイルマップの設定
    1. 設定 (Ctrl+,) を開く
    2. (User ではなく)Workspace タブを選択
    3. 左側 Extensions → Microsoft Edge Tools
    4. Source Map Path Overrides → Edit in settings.json
    5. 設定追加(ちょい長いので次節へ分けます)
    • プロジェクトルートに .vscode/settings.json ファイルが生成される
  2. DevTools 再起動
    1. エディター部分の Edge DevTools タブを閉じる(開いていれば)
    2. サイドバー Microsoft Edge Tools → 対象のドキュメント → 右端 Attach and open Microsoft Edge Tools ボタンを押す

設定画面。Source Map Path Overrides の設定は GUI では行えず、設定ファイルを開く必要がある。

設定はたぶん sourceMapPathOverrides で検索しても出ます。

あと、設定は User ではなく Workspace で保存するようにしてください。じゃないと同じマシンの全プロジェクトで有効になってしまう。

Source Map Path Overrides の設定

さて Source Map Path Overrides の設定なんですが、開いた JSON ファイルをこんな↓風にしてください。(新規作成したものとします。既存のものがある場合は適宜対応願います。)sourceMapPathOverrides の中身は初期値として何行か追加されてると思うんですが、それは削除しても残しておいても構いません。

  • .vscode/settings.json
{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "http://localhost:8080/*": "${workspaceFolder}/public/*"
  }
}

正直これのマップ設定の感覚がよくわかってないんですが、デモプロジェクトならこれで動くはず。他で使う場合はポート番号 8080 やファイルの置き場所 /public/ なんかを変更してください。

CRA

create-react-app で作成したアプリの場合の設定も載せておきます。

{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "webpack://src/*": "${workspaceFolder}/src/*"
  }
}

CRA は webpack で合成とかなんかしたファイルになるんですが、そこから source maps の仕組みを用いて元のコードを保存しています。その保存された元のコード (webpack:…) をさらに実際のファイルへ対応マップするのが上記です。

その他の環境

Elements パネル Styles ペインで表示されるファイルへカーソルを乗せるとパスが表示されます。これを件の設定で利用する感じっぽい。

App.css のパスとして webpack://src/App.css が表示される様子。

Network パネルを表示する

ところでタブは Elements パネルだけですが、Network パネルを出すこともできます。

  1. Network 利用の設定
    1. Workspace → Extensions → Microsoft Edge Tools
    2. Enable Network をオンに
  2. DevTools 再起動

件の設定は、Settings の中で @ext:ms-edgedevtools.vscode-edge-devtools network で検索しても出てきます。

その他のパネル

出せないっぽい。全部出してくれていいのになあ。

最初に開く URL

設定の Default Url ってやつで最初の URL を指定します。http://localhost:8080/ とか。

なんかだめなとき

The tab is inactive

接続しているウィンドウのタブが非表示の間は利用できません。

見なくてもいいやってときは Headless モードを検討してください。別項参照。

CSS ファイル名をクリックしても開かない

マップが間違ってる。うーん typo とかに気を付けてどうにか頑張ってください。

画面が消えた

DevTools 部分の左上 Toggle screencast を押してください。出したり消したりできます。

ページが真っ白

サーバー起動してないとか。

その他

JS のデバッグもしたい

JavaScript は VS Code 本体で開いてブレイクポイントを設置したりステップ実行したりできるので、それ使いましょう。

こちらをどうぞ。

今回のデモプロジェクトと同じものを使っているので、VS Code サイドバーの Run (Ctrl+Shift+D) と .vscode.example/launch.json を見てもらえればわかるかも。

逆に DevTools で編集したい

できます。簡単に言うと Sources パネルの左側サイドバーで Filesystem を使います。

こちらをどうぞ。

いっそブラウザーのウィンドウいらない

設定で Headless にチェックを入れるとヘッドレスモードになって、”+” ボタン押してもウィンドウが出てこなくなります。ウィンドウはなくても VS Code の中で画面は見えてますね。設定でオンオフするため機動性が低いのが玉にきず。

エディターでタブを閉じても見えないウィンドウは生き残っています。サイドバー Microsoft Edge Tools の一覧に表示されるので、Attach and open Microsoft Edge Tools ボタンで再度タブを開けます。

というわけで見えないし消えないウィンドウは “+” を押すたびに増えます。どうやって消すんだろ。VS Code 再起動したら消えました。(時間差があります。)

Edge じゃなくて Chrome がいい

できます。たぶん Chrome DevTools Protocol でやってるので。

Chrome を起動するときに --remote-debugging-port=9222 を付けて起動してください。そうするとサイドバー Microsoft Edge Tools の一覧に表示されます。Attach and open Microsoft Edge Tools ボタンを押せば接続完了です。

Mac でやる

ターミナルからこれ↓でリモートデバッグ用ポートを与えて起動できます。実行する前に Chrome はいったん終了させてください。

$ cd /Applications/Google Chrome.app/Contents/MacOS
$ open -a "Google Chrome" --args --remote-debugging-port=9222

やっぱり DevTools 丸ごと使いたい

ですよねー。今回紹介した拡張は機能を絞ってるけど、他に全部入りの DevTools タブを表示する拡張があります。こちら。

でも試したら真っ白で動かなかったんだよな。残念。あとスクリーンキャスト(画面)はないみたい。

マップわからん

pathMapping がそれっぽい設定なんだけど駄目で、sourceMapPathOverrides にして一通り動いた。

あとこの sourceMapPathOverrides を追加するときに初期値でいくつかの環境に対応した設定されててあら便利と思ったけどバージョンの違いか例えば / の数が違ってて動かなかったりした。うーん報告するべきなのか自分の環境がおかしいのか?

おしまい

正直いまいち痒いところに手が届かない気がしてます。あと外部モニター使える環境なので VS Code とブラウザーと両方同時に表示できるからそんなに必要に駆られていないというのもあるかも。

参考

VS Codeの中でJavaScript/Node.jsのデバッグまでする(ひとり DevTools Advent Calendar 2020 – 21日目)

カテゴリー: JavaScript

21 日目の記事です。

Chrome DevTools を使ってクライアント側に限らずサーバー側もデバッグできるんですが、それはそれとして開発中はエディターで開いたソースコードと行ったり来たりするのが面倒です。

VS Code なら Chrome DevTools (の機能)と連携して、エディター内でブレイクポイントを設置するなどできます。ちなみに DevTools の画面は今回出てきません。

先にまとめ

  • サーバー側もクライアント側も VS Code からデバッグできる
    • ブレイクポイントの設置
    • 変数の閲覧
    • ログ出力
  • Run パネルからデバッグ設定を作成、デバッグ実行
  • Next.js などビルドを行うものも、ファイル出力できれば

デモプロジェクト

よければこちらご利用ください。JavaScript と Node.js と両方用意してございます。サーバーは npm run start ないし node server.js で起動します。

本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。

クライアント側(フロントエンド)をデバッグする

HTML と JS はこんな感じです。なんかこうボタンを押したらサーバーから JSON 取得してコンソールに表示します。

<p>
  <button id="fetchButton">Fetch</button>
</p>
const elFetch = document.querySelector("#fetchButton");

elFetch.addEventListener("click", async () => {
  const res = await fetch('/data.json');
  const json = await res.json();
  console.log('Fetched', json);
});

デバッグ設定

  1. サイドバーの Run パネル (Ctrl+Shift+D) を開く
  2. “create a launch.json file” を押す
    • 既に生成済みの場合は上部設定プルダウンで “Add configuration…” → “Chrome: Launch”
  3. “Chrome (preview)” を選択
  4. 生成された .vscode/launch.json の内容を編集
    • name
    • url
    • webRoot

launch.json 生成前の Run パネル。設定作成ボタンなどが表示される。

launch.json 生成後の Run パネル。デバッグ対象を選択して開始するボタンがある。

生成される launch.json はこんな感じです。これから webRoot と url、name を編集します。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

まずは webRoot 。今回のデモプロジェクトでは "${workspaceFolder}/public" としてください。ファイルが public/ にあるので。URL のパスが /script.js のとき、public/script.js がデバッグ対象のファイルと認識されるようになります。

url はブラウザーで開く URL です。先述のデモプロジェクトであれば "http://localhost:8080" です。

あと name は好きに付けて良いようなので、わかりやすく "Client" としときましょう。

完成品はこちら。

デバッグ開始

(デバッグ前に、画面を開けるようサーバーを起動しておいてください。先述のデモプロジェクトなら npm run start です。)

開始するにはサイドバー Run パネルの上部で name に設定したもの、”Launch Chrome…” だか “Client” だかを選択して、隣の Start Debugging ボタンを押します。

console.log() などは Debug Console (Ctrl+Shift+Y) へ出力されます。(パネルが出てこない場合はメニュー View → Debug Console から。)

デバッグ開始した様子。下部ステータスバーが橙色になり、デバッガーのポップアップも表示される。

ブレイクポイントとデバッグ

ブレイクポイントは行番号の左隣をクリックです。デファクトスタンダードの操作ですね。赤い丸ぽちが置かれます。

ブレイクポイントで止まっている間は DevTools の Sources パネルと同様、マウスカーソルを変数に乗せて内容を表示したり Run パネルの VARIABLES ペインから変数を書き換えたりができます。

デバッグ終了

ブレイクポイントの停止から復帰するにはポップアップの Continue ボタン (F5) を、デバッグ自体を終了するには Stop ボタン (Shift+F5) を押します。

はい楽しかったですね~~~。

サーバー側(バックエンド)をデバッグする

デバッグ設定

サーバー側のデバッグ設定も追加します。

  1. サイドバーの Run (Ctrl+Shift+D) を開く
  2. 上部設定プルダウンで “Add configuration…”
  3. “Node.js: Launch program”
  4. 生成された .vscode/launch.json の内容を編集
    • name
    • program

launch.json の configurations に追加されているはず。

program はサーバープログラムです。デモプロジェクトなら "${workspaceFolder}/server.js" でお願いします。"npm start" はここでは書けません。npm スクリプト実行なら別の type になります。(本稿では触れない。)

name はクライアント側と同じく "Server" にしときます。

迷ったら完成品をご確認ください。

デバッグ

Run パネルでサーバーの方が選択されていることを確認して Start Debugging ボタンを押してください。

あとはブレイクポイントの設置などクライアント側でやったのと同じ手順です。

サーバーとクライアント両方を同時に

設定があれば両方同時にデバッグ可能です。順に選択して Start Debugging するだけ。

Server と Client の両方をデバッグ開始すると、ポップアップでは操作対象を切り替えられるようになる。

その他

CRA とか Next.js とか

create-react-app、Next.js ともに、クライアント側はビルドされた結果がメモリー上におかれるため、webRoot を設定する先のディレクトリーがありません。webpack-dev-server の writeToDisk オプションを指定してファイルとして出力する必要があります。

CRA は eject するか、何だったか CRA の webpack の設定を変更できるようにする npm パッケージを導入して設定してください。

Next.js は next.config.js の設定でやれそう、と思って試したけどだめだった。よくわかってないので自分が間違ってる可能性が高い。うう。

一方 Next.js のサーバー側は簡単で、これ↓でデバッガーを利用可能でした。

// launch.json > configurations
{
  "name": "Next.js Server",
  "request": "launch",
  "runtimeArgs": ["run-script","dev"],
  "runtimeExecutable": "npm",
  "skipFiles": ["<node_internals>/**"],
  "type": "pwa-node"
},

Chrome: Attach

新しいウィンドウで開く代わりに既存のウィンドウへデバッガーを割り当てるってこともできます。

できますが、その場合は事前に「既存のウィンドウ」がデバッガーを受け付けるオプション --remote-debugging-port=9222 付きで起動していることが必要です。例えばこんなショートカットを用意します (Windows) 。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

ポート番号は launch.json の設定を合わせます。

うまく動かない?

ブレイクポイントを置こうとしても赤い丸が黒くなっちゃうことがあります。

ブラウザーで見てるファイルと VS Code で開いてるファイルとのマッチに失敗しているかも。そして失敗している原因はたぶんここらへん。

  • webRoot のパスが間違っている
  • サーバーがまだ起動していない
  • デバッグ用のウィンドウが複数開かれている

あとはビルドする系だと source maps のパスがおかしいとか……。

Edge も使える

Chrome 同様に Edge で開いてデバッグも可能です。

下地が同じ Chromium で、Chrome DevTools Protocol を共有しているから、のはず。未確認だけど Opera とかでも動くんじゃないですか。

おしまい

仕事のコードは source map がなんかおかしいのか、普通の DevTools では動くんだけどこのやり方駄目でした。使いたい……。

参考