DevTips：Web開発者のヒント（1-16）

Google Chromeブラウザーチームは、開発者がより良い生活を送るために多大な仕事をしています。 Chrome DevToolsは、Webアプリケーションのデバッグを大幅に簡素化する優れたツールの例です。 しかし、このシステムのすべての機能が一見して見えない場合があるため、ロンドンのプログラマーであるUmar Hansaが彼のWebサイトで、非常に便利な形式で説明しています：小さなテキストと短いスクリーンキャスト。 そして、私たちは、これらのヒントをロシア語圏の聴衆がより利用しやすいものにすることにしました。



内容 ：

1. ポート転送により、モバイルデバイスでローカルリンクを開くことができます
2. DOM要素の擬似クラスのアクティブ化
3. cURLを使用してネットワーク要求を繰り返します
4. 任意のWebページで保存されたコードブロック（スニペット）を実行する
5. DevToolsを使用してファイルの変更を追跡する
6. シンプルなページアクションの記録
7. CSSセレクターを使用したDOMツリー要素の検索
8. データURI形式で画像をコピーする
9. ファイルを開くときに目的の行に移動します
10. 編集間のナビゲーションの簡素化
11. ネットワーク要求への応答をコピーする
12. スクリプトを編集するときに複数のカーソルを使用する
13. ブロック選択
14. 高速コンソールイベントモニタリング
15. コンソールで選択したDOMノードにアクセスします
16. is：runningフィルターを使用して不完全なネットワーク要求を追跡する

継続： 17-32、33-48

1.ポート転送により、モバイルデバイスでローカルリンクを開くことができます。

モバイルデバイスでローカルサイトをデバッグするには、そのページを開き（「 Chrome to Phone 」拡張機能を使用すると便利です）、リモートデバッグを有効にし、専用ポートを介してローカルサイトをモバイルデバイスにリダイレクトします。 ページを更新すると、コマンドラインを使用しなくてもすべてがどのように機能するかがわかります。

2. DOM要素の擬似クラスのアクティブ化

特定のDOM要素がさまざまな状態（ active



、 focus



、hover、visit）でどのように動作するかを確認する必要がある場合、Chrome DevToolsでそれらのいずれかをアクティブにできます。 これを行うには、[要素]パネルで目的の要素を右クリックし、[要素の状態を強制する]を選択します。 別の方法があります。「スタイル」セクションの要素の特性パネルで、「要素の状態の切り替え」ボタンをクリックし、特定の状態を選択します。



ノードの状態を変更すると、DOMツリーの開始タグの横に小さなオレンジ色の円インジケーターが表示されます。 場合によっては、終了タグに表示されます（視野から離れすぎていない場合）。



ご注意 perev。 ： 最近のバージョンでは、ブラウザ開発者は、要素パネルのノードのコンテキストメニューをわずかに変更しました。 中間の「要素の強制状態」なしで、要素の状態を直接選択できるようになりました。 また、オレンジ色のインジケータ自体がクリック可能になり、同じメニューが開きます。

3. cURLを使用してネットワーク要求を繰り返します

[ネットワーク]パネルに表示される各リソースには、[cURLとしてコピー]アイテムを含む独自のコンテキストメニューがあります。 この項目が選択されると、「 cURL 」ユーティリティを介して選択されたリクエストをエミュレートするコマンド（リクエストヘッダーを含む）がクリップボードに移動します。 ターミナルに貼り付け、必要に応じて編集して実行します。



ご注意 perev。 ： cURLを使用せずにXHRリクエストを繰り返すには、「ネットワーク」パネルでそれを見つけ、そのコンテキストメニューで「XHRに返信」を選択します。

4. Webページで保存されたコードブロック（スニペット）を起動する

DevToolsには、スニペットと呼ばれる機能があります。 これを使用して、Webページのコンテキストで実行できるコードを作成または削除できます。 これは、コンソールパネルでコードを再入力するよりもはるかに便利です。 試してみてください：

• 「ソース」パネル→「スニペット」を開きます（左側のタブにあります）。
• このタブのコンテキストメニューで[新規]を選択します
• スニペットに適した名前を入力してください。
• スニペットメニューで「実行」項目を選択して開始します（または「Cmd + Enter」）。

完全な複数行の編集と、保存せずにスニペットを誤って閉じることの確認があることに注意してください。

5. DevToolsを使用してファイルの変更を追跡する

「ローカル変更」機能を使用すると、DevToolsを介して行われたファイルへの変更を追跡できます。 DevToolsを使用してファイルを変更および保存した後、「ソース」パネルの左列にあるファイルのコンテキストメニューで「ローカル変更」を選択すると、変更のリストが表示され、それぞれをロールバックできます。

6.シンプルなページアクションの記録

タイムラインパネルを使用してページアクションを記録する必要がある場合、メインブラウザーウィンドウからDevToolsウィンドウをデタッチし、記録開始ボタンがページの分析されたセクションにできるだけ近くなるように配置します。 別の方法として、「Cmd + E」キーボードショートカットを使用して、記録動作を開始/停止します。



ご注意 perev。 ： DevToolsウィンドウのこの配置により、マウスを録音ボタンからアプリケーションの目的の部分に移動するときに発生する不要なノイズを回避できます。

7. CSSセレクターを使用してDOMツリー要素を検索する

[エレメント]パネルで関心のあるDOMノードをすばやく見つけるには、CSSセレクター検索を使用します。 検索は、キーボードショートカット「Cmd + F」が原因です。

8.データURI形式で画像をコピーする

（base64でエンコードされた）データURI形式の画像へのリンクをコピーするには、[リソース]パネルで目的の画像を見つけ、そのコンテキストメニュー（右パネル）から[データURLとして画像をコピー]を選択します。



ご注意 perev。 ： これは、たとえば、画像のリクエストをサーバーに送信したくないが、CSSのbase64コピーを使用する場合に便利です。

9.ファイルを開くときに目的の行に移動します

「ソース」パネルの「Cmd + O」コマンドで開いたファイル内の目的の場所に直接移動し、次の形式で目的の位置を示します:_:_



。 試してください：

• 「ソース」パネルで開いたファイルで「Cmd + O」を押します。
• 「：5：9」と入力します
• 5行目の文字9に転送されます。

10.編集間の簡素化されたナビゲーション

[ソース]パネルは、すべてのスクリプト変更の場所を記憶しており、Alt-（戻る）とAlt +（進む）を使用してそれらの間を切り替えることができます。

11.ネットワーク要求への応答のコピー

ネットワークリソースの背後の要求ヘッダーまたはそれに応答ヘッダーをコピーすることに加えて、応答全体をコピーできます。

12.スクリプトの編集時に複数のカーソルを使用する

[ソース]パネルでコードの異なるセクションを並行して編集するために、同時に複数のカーソルを使用できます。 これを行うには、「Cmd」を押しながら、カーソルを置きたい場所をクリックします。 「Cmd + U」を使用して選択を解除できます。

13.ブロック割り当て

Altキーを押しながらマウスを移動すると、ソースパネルでブロック選択を使用できます。

14.コンソールでのイベントの迅速な監視

コマンドラインAPIのmonitorEvents(object [, events])



メソッドを使用して、オブジェクトのすべてのイベントを記録できます。 イベントが発生すると、そのオブジェクトがコンソールに表示されます。 これは、特定のイベントのプロパティを思い出せない場合に便利です。

15.コンソールで選択したDOMノードへのアクセス

DevToolsコンソールの[要素]パネルで選択したDOMノードを使用するには、単に$0



ます。 また、コンソールで評価された最新の式の値を返す$_



コンストラクトを使用することもできます。



ご注意 perev。 ： [ソース]パネルは、最後に選択した5つのアイテムを記憶しています 。 これらのアイテムには、 $0



、 $1



、 $2



、 $3



、 $4



からアクセスします 。 これらのコンストラクトは本格的なJavascript式であるため、 $0.appendChild(...)



メソッドの呼び出しなど、あらゆる操作をサポートします 。

16. is：runningフィルターを使用した不完全なネットワーク要求の追跡

[ネットワーク]パネルの検索では、 is:running



式を使用して、アクティブな（まだ応答されていない）要求をフィルタリングできます。 status-code



、 method



、 domain



などのフィルターを使用することもできdomain



。



ご注意 perev。 ： 現在、Chrome Canary 48では次のフィルターがサポートされてい domain



： domain



、 has-response-header



、 is:running



、 larger-than



、 method



、 mime-type



、 mixed-content



、 scheme



、 set-cookie-domain



、 set-cookie-name



、 set-cookie-value



、 status-code



。



次の部分を待ってください！