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

タグ: Advent Calendar 2020

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 では動くんだけどこのやり方駄目でした。使いたい……。

参考

JSで想定外に画面遷移するとき、消えてしまうログを残してデバッグする(ひとり DevTools Advent Calendar 2020 – 20日目)

カテゴリー: Web

20 日目の記事です。

ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。

そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。

コンソールのログを残す

  1. Console パネルを開く
  2. Console パネル右上のコンソールの設定ボタンを押し、設定欄を開く
  3. “Preserve log” のチェックを入れる

これで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。

const eventLogger = (event) => console.log(event.type);;
window.onpagehide = eventLogger;
window.onunload = eventLogger;

Console パネルで Preserve log にチェックを入れ画面遷移した様子。前の画面を閉じる際のログが残っている。

ブレイクポイントが使えるならそっちで

問題がわかってきたら、次はログをどうこうじゃなくて Sources パネルでブレイクポイント仕掛けましょう。画面が変わる前に止めてデバッグできます。

通信のログを残す

たしか初期値はオフだけどチェックボックスは最初から出てます。

  1. Network パネルを開く
  2. ヘッダー部分 “Preserve log” のチェックを入れる

Network パネルで Preserve log を有効化した様子。移動直前に謎の API /getNextUrl を叩いていることがわかる。

リダイレクトは表示される

301 とかで画面遷移するときは、チェック入れなくても元々ログに残るので大丈夫です。

なので使いどころはそうだなあ、たまに広告に載ってくる、不意にリダイレクトするような悪意のあるスクリプトを捜査するときとか。

その他

preserve

主な意味:保存する、維持する、保つ、留める、(…に)漬ける、保護する、守る、禁猟とする

おしまい

location.href をフックできたら楽なんだけどなあ。

参考

視覚特性に考慮してアクセシビリティを高めるためのツール(ひとり DevTools Advent Calendar 2020 – 19日目)

カテゴリー: Web

19 日目の記事です。

背伸びしてる感あって怖い気もするんですが、DevTools でやれることの話です。ARIA の話は出てきません、わかんないので……。

先にまとめ

  • Lighthouse で検出 (”Background and foreground colors do not have a sufficient contrast ratio”)
  • Elements パネル → Styles の色選択ポップアップで適切なものに
  • Rendering パネル → Emulate vision deficiencies で視覚特性エミュレート
  • Rendering パネル → Emulate CSS media feature prefers-reduced-motion でアニメーションを減らす OS 設定エミュレート

Lighthouse で問題のある箇所を探す

Lighthouse の Accessibility 節で確認するのが一番簡単です。

  1. DevTools → Lighthouse パネルを開く
  2. Accessibility にチェックを入れた状態で Generate report ボタンを押す
    • 他はあってもなくても
  3. Contrast 節以下の該当項目を確認
    • “Background and foreground colors do not have a sufficient contrast ratio”
    • = 背景と前景の色に十分な明度比がない
    • 見えない場合はたぶん Passed audits 節に含まれていて、問題なしということ

項目を開くとどの要素で問題かもわかります。クリックすると Elements パネルで開けるので、そのまま調整に入りましょう。

Lighthouse での確認結果。問題のある要素も一覧で示してくれる。

なお画像で文章を表現している場合は、まあ当たり前ではありますが、検出されません。作るときに気を付けないといけないですね。Lighthouse による検出で経験詰んで慣れてくれば画像編集の際にも意識が向いてきそう。

Elements パネルで色を調整

Elements パネルの Styles ペインで、四角い色のプレビューが出るのは見たことがあると思います。実はこれクリックできて、ポップアップで色編集ができます。

さらに color プロパティなど場合、そのポップアップに Contrast ratio という項目が表示され、件の「十分な明度比」の確認ができます。(border-color とかには出ません。)さらにさらに、問題がある場合は問題のない色の提案までしてくれます。べんり~。

Elements パネルで、色のプレビューから出せるポップアップ。パレットから色を選択できる他、色の表現方法 (HEX, RGB, HSL) を変えたり、適切な明度比の提案も。

Render パネルで視覚特性のエミュレート

Rendering パネルの一番下に Emulate vision deficiencies という項目があって、ここでぼやけるやつや P 型、D 型といった特性をエミュレートできます。

エミュレーションをしていない状態。黄土色と緑色の二色を利用している画面。

P 型のエミュレーションを利用した状態。色の差がなくなった。

ちなみにこのエミュレーション、SVG フィルターを使って実装しているらしい。

Render パネルでアニメーションを減らす状態のエミュレート

Twitter みたいにアプリ単位で機能を持っているものもありますが、主要な OS で全体的に設定できるようです。例えば iOS なら「設定 → 一般 → アクセシビリティ → 視覚効果を減らす」とのころ。

MDN のページにデモがあるのですぐ試せます。またどこから設定できるかも掲載されているので、そっちを試してみるのも良いかもしれません。

その他

CSS Overview で確認

Lighthouse で確認する他に、CSS Overview という機能からも確認できるようになりそうです。

現在はこの機能は未完成で、Experiments として提供されています。試したところ Lighthouse で検出されるものより数が減ってたり何も出てこなかったりしました。違う計算方法なのかな?

明度比専用の機能ではないんだけど、まあ興味あれば試してみてください。

おしまい

アクセシビリティ方面は詳しくなく経験も全然ないのでわかんないことが多いですが、Lighthouse が出してくれる情報に沿っていけばある程度(今回の明度比以外も)良い感じにやれるようです。完璧からはほど遠いんだろうけれど、初手としては良いんじゃないですか。知らんけど。

あと最近ます P さん達がウェブアクセシビリティの検証ツールを作っておられるそうなので、そういうのも試すと良いのかも。

ところで「視覚特性」という呼び方は大丈夫ですか?

参考