繰り返しになりますが、Web開発者にとって有用なヒントの翻訳サイクルはオンエアです。 今回、著者はSublime TextエディターとNode.jsフレームワークをそこに追加することにより、調査したツールの範囲を拡大しました。 前のパーツ：
1-16、17-32行こう！
内容 ：
33.
簡略化されたCSSプロパティ表記の拡張34.
色によるセレクターの一致の判断35.
視覚的なナビゲーションを使用し、ページの読み込みプロセスのキャプチャされたスクリーンショットを表示する36.
崇高なテキスト：GOTO機能を備えたファジー検索37.
キーボードとマウスホイールを使用してCSSプロパティの値をすばやく変更する38.
スコープ内のアイテムのスクロール39.
Node.js：Babelを使用してES6を起動する40.
エレメントパネルからCSSまたはJavascriptファイルを表示および編集する41.
デバッグ中にコードの横にあるJavaScript変数の値を表示する42.
ネットワークパネルでカラーグループを使用してリソースタイプの識別を簡素化する43.
DOM要素の擬似クラスの有効
化44.
開発者ツール自体の検査45.
[ソース]パネルから選択したコードブロックを起動する46.
条件付きブレークポイントの設定47.
ホットキーを使用して、選択した行の次の出現箇所に
移動する48.
[ソース]パネルでのCSSファイルの編集とCSSプロパティ値の変更の簡素化33. CSSプロパティの短いレコードを展開する
[スタイル]パネルの対応するプロパティの横にある矢印をクリックして、短縮されたCSSプロパティレコードを展開します。 たとえば、プロパティ
flex: 0 0 45%;
になります
flex-grow: 0; flex-shrink: 0; flex-basis: 45%;
34.色によるセレクターの一致の判断
スタイルパネルに表示されるセレクターの部分は、選択したDOM要素のセレクターが一致するかどうかに応じて、異なる色でペイントできます。 不一致の部分はグレーで表示され、一致した部分は黒で表示されます。
35.視覚的なナビゲーションを使用し、ページの読み込みプロセスのキャプチャされたスクリーンショットを表示する
ネットワークパネルも注目すべきアップデートを受け取りました。 ここで、フィルムの形で作られたストリップを見ることができます。フレームは、ページのレンダリングプロセスのスクリーンショットです。 フレームをクリックすると、リソース読み込み表示パネルの適切な場所に移動します。
36.崇高なテキスト：GOTO機能を備えたファジー検索
Sublime Textを使用し、ショートカット
CMD + P （Windowsの
場合はCtrl + P ）を使用すると、コード内のエンティティの検索が開始されます。 たとえば、jsファイル
@fn関連する検索
@fnと入力
@fnと、そのような関数がすべて見つかります。
また、
#プレフィックスを使用してファジー検索をトリガーします。 たとえば、変数
track_to_playを見つけるには、
track_to_play記述するだけ
#ttp 。
37.キーボードとマウスホイールを使用してCSSプロパティの値をすばやく変更する
CSSプロパティの数値を増減するには、次を使用します。
- 矢印↑/↓で値を1 ずつ変更します。
- Shift +↑/↓で値を10 ずつ変更します。
- Alt +↑/↓で値を0.1 ずつ変更します。
- マウスホイールで値を簡単に変更することもできます。
38.スコープ内のアイテムのスクロール
関心のあるDOM要素がページの表示制限の外にある場合、「要素」パネルの必要な要素のコンテキストメニューから「ビューにスクロール」コマンドを使用してスコープに戻すことができます。
DOM要素にカーソルを合わせると、ページに小さなツールチップが表示され、ブロックのサイズと位置が表示されることを覚えておくと便利です。
39. Node.js：Babelを使用してES6を起動する
次のように、ターミナルでES6機能を試すことができます。
- babel npmパッケージをグローバルにインストールする
npm install -g babel
- 新しい
sum.jsファイルを作成する
const sum = arr => arr.reduce((a, b) => a + b); console.log( 'sum: ', sum([1, 2, 3]) );
- 次を使用してコードを実行します。
babel-node sum.js
また、REPL（Read-eval-print loop）モードで引数なしで
babel-nodeを実行して、オンザフライでJavascriptを実行することもできます。 GulpまたはGruntビルドパッケージを使用して、この機能を既存のプロジェクトに統合します。
40.エレメントパネルからCSSまたはJavascriptファイルを表示および編集する
[エレメント]パネルに表示されているCSSおよびJSリソースを[ソース]パネルで直接開いて、完全に編集できるようになりました。 これを行うには、対応するファイルのコンテキストメニューで[開く]を選択します。
41.デバッグ中にコードの横にあるJavaScript変数の値を表示する
更新されたデバッグモードでは、変数の値を実行中のコードのすぐ横に表示できます。 これは、フォーマットした後の縮小スクリプトでも機能します。
この機能を有効にするには（デフォルトで有効になっていない場合）、次の手順を実行します。
- 開発者ツールの設定を開きます。
- [ 一般] →[ ソース] →[ デバッグ中に変数値をインラインで表示する]チェックボックスをオンにします 。
42.ネットワークパネルでカラーグループを使用してリソースタイプの識別を簡素化する
[ネットワーク]パネルでタイプごとに必要なリソースをすばやく見つけるには、カラーコードリソースタイプカラーコードリソースタイプ機能を使用します。 この機能を有効にするには、次を実行します。
- 開発者ツールの設定を開きます。
- [ 一般] →[ ネットワーク] →[ リソースタイプの色分け]ボックスをオンにします。
リソースの各タイプ（スクリプト、スタイルシート、ドキュメント、フォントなど）は、独自の色でペイントされます。 これで、ファイル名を読まなくても、見ているリソースをすばやく理解できます。
43. DOM要素の擬似クラスの有効化
[要素]パネルで、次のような要素の擬似クラスをアクティブ化できます。
:hover:active:focus:visited
要素の状態がこのように変化すると、その左側にオレンジ色のインジケータが表示されます。
44.開発者ツール自体の検査
開発者ツールタブの固定を解除し、 Cmd + Alt + Iを押し
ます 。 新しいウィンドウが開き、元のツールウィンドウを確認できます。
これは、たとえば、DevToolsの新しいスキンを作成するときに役立ちます。
45. [ソース]パネルから選択したコードブロックを起動する
[ソース]パネルで選択したコードスニペットを確認するには、ショートカット
Ctrl + Shift + Eを使用してコンソールで実行し
ます。 この場合、コードは現在のコンテキストで実行されます。
46.条件付きブレークポイントの設定
ブレークポイントを設定することにより、条件式にすることができます-式の実行に依存します。 これを行うには、「ソース」パネルの行のコンテキストメニューで「条件付きブレークポイントを追加」を選択し、式を入力します。
47.ホットキーを使用して、選択した行の次の出現箇所に移動する
ショートカット
Cmd + Dを使用して、選択した行の次の出現
箇所に移動できます
。 誤って間違ったものを選択した場合は、
Cmd + Uを使用して選択を解除します。
48. [ソース]パネルでのCSSファイルの編集とCSSプロパティ値の変更の簡素化
[ソース]パネルでCSSファイルを直接編集できます。変更をすぐに適用し、ファイルを保存する必要はありません。 また、
Alt +↑/↓を使用して、CSSプロパティの数値を変更します。
お楽しみに！ すぐに次の部分があります。