はじめに
こんにちは。
皆さん、Google Chrome(以下Chrome)の「デベロッパーツール」をご存じ……なのはある程度経験のあるエンジニアあれば当たり前ですよね。
エンジニアにとって最早身体の一部と言っても間違いないであろうデベロッパーツールですが、
数年前から日本語を含む多くの言語で利用できるようになったのはご存じでしょうか。
調べた範囲だと、約3年前から実装されたそうです(2021年)
実装方法
簡単に変更の方法も説明しておきます。
- Chromeのデベロッパーツールを開き、ツールの右上にある「歯車マーク」を選択して設定画面に飛びます(ツールのレイアウトには幾つか種類があるかと思いますが、どのレイアウトにおいても歯車マークは右上にあります)
- 設定画面に切り替わりましたら(Settingsと大きく文字が表示されているので分かるかと思います)、一番最初に選択されているであろう「Preferences」タブの中にある「Language」のドロップダウンリストから「Japanese - 日本語」を選択します
- 選択すると「Requires reload(再起動してください)」とメッセージが表示されるのでデベロッパーツールを再起動します(この際に設定画面を閉じると、デベロッパーツールの上部に設定が更新されたので、有効にするために再読み込みのボタンが表示されます。親切ですね!)
- 今まで英語だった項目が日本語に変更されて設定完了です!
日本語化されて各タブはもちろんのこと、タブの中の項目も分かり易くなったかと思います。
元の設定のままのが英語に慣れる、という考えもあるのでそこはお好みで
そして罠にハマる
さて、私はこの日本語化対応が実装されてからこれまでずっと日本語で仕事をしていたのですが、先日ある罠にハマったのです。
私「Chromeで画面のスクリーンショットを撮りたいなぁ。確かデベロッパーツール上で可能だったはず!」
Google先生「Windowsでスクリーンショットを撮るならデベロッパーツールを開いた状態でCtrl + Shift + Pを入力して、その後にfullと入力するとできますよ」
私「よっしゃ! ………………あれ、できないが!?」
何度も試してみましたがスクリーンショットが撮れず、再度調べ直してもどこも同じ方法しか載せていない。
以前にもスクリーンショットは試したことがあり、その際は普通にできた記憶もあるので色々と混乱してしまいました。
そして悩んだ結果、とある推測に辿り着きます。
以前(日本語化前)はできた。ということは……。
そう、デベロッパーツールを日本語化したということは、つまりコマンドの指示も日本語で入力してあげる必要があったのです。
上記でも記載した「Ctrl + Shift + P」でコマンドを起動し、その後「スクリーンショット」と入力してあげると……。
サジェストに「スクリーンショット」の一覧が表示されました! やった~!
今表示している画面、ページ全体、どれも問題なくスクリーンショットを保存できました!
まとめ
Chromeのデベロッパーツールの日本語化対応は分かり易くて便利ですが、
コマンドなども全て日本語で指示をしてあげないといけない、というのは盲点でした。
肝心のプログラミング言語は変わらず英語なので今回の場合も英語のままでも大丈夫だと過信してしまいました。
指示する単語の日本語訳を一々調べるのも手間がかかるので、一長一短とはまさにこのことだと感じる出来事でした。