青训营 |「フロントエンドが知っておくべき開発デバッグ知識」

フロントエンドデバッグの特徴#

多プラットフォーム

ブラウザ、ハイブリッド、NodeJs、ミニプログラム、デスクトップアプリ……

多環境

ローカル開発環境、オンライン環境

多ツール

Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……

多テクニック

Console、BreakPoint、sourceMap、プロキシ……

Chrome devTools#

Chrome devTools は Google ブラウザに搭載されているデバッグツールで、非常に強力です。現在、多くのブラウザもこのデバッグツールを採用しています。スタイルを動的に追加 / 削除し、リアルタイムで表示することができます。

強制状態表示#

特定の状態で表示される要素を表示することができます（例えば hover、active など）。

右側のスタイルバーを使用して、要素の状態を強制したり、擬似クラスを追加したりすることもできます！

スタイルをフィルタリングすることもできます。

スクリーンショット#

はい、その通りです。ノードのスクリーンショットを撮ることができます。非常に素晴らしいです（冗談です）。

console#

js の console.log はここに記録されます。多くは言う必要はありません、皆さんも使ったことがあるでしょう。

ただし、1 点言及する必要があるのは、スタイル付きのテキストを出力してデバッグ時に即座に位置を特定できるようにすることもできます。例えば：

console.log('%s %o,%c%s', 'hello', {name:'私は名前です', age: 18}, 'font-size:20px; color:red; ', 'Welcome to bytedance!');

ここでの % s は文字列を出力し、% o はオブジェクトを出力し、% c はスタイルを出力します（c/c++ のフォーマット出力を使ったことがある人は知っているでしょうが、ここでの % c はスタイルです）。

console.table はオブジェクトの配列を視覚的に表示することができ、非常に便利です。

const persons = [{id:1, name:'張三', age: 18, des: 'いいね'},{id:2, name:'李四', age: 24, des: '私は李四です'}, {id:3, name:'王五', age: 20, des: 'これは何ですか'}];

ツリー構造 dir

Source Tab#

その名の通り、ソースコードの内容を表示し、ブレークポイントを追加したり、ステップデバッグを行ったりできます。

コードの特定の行で debugger を実行するか、ブレークポイントを設定すると、その行に到達したときに一時停止します。その後、ステップデバッグを続けることができます。以降のデバッグについてはあまり詳しく説明しませんので、実際に試してみて理解してください。（バックエンドデバッグを多く行うと、これに慣れるのは簡単です。x はブレークポイントを設定したのと同じです。）

他にも、リクエストが発生したときにブレークポイントを設定することができます：XHR/fetch breakpoints、要素構造にブレークポイントを追加する（削除など）、scope でスコープリストを確認できます（クロージャを含む）、CallStack で現在の JavaScript コードの呼び出しスタックを確認できます。

圧縮されたコードはどうデバッグする？SourceMap#

フロントエンドコードは「オープンソース」の特性を持っており、安全上の理由から、JavaScript コードは通常 webpack などのツールで圧縮されます。圧縮されたコードは通常 1 行のみで、変数は a、b などに置き換えられ、全体が読みづらくなります。では、圧縮されたコードはどうデバッグするのでしょうか？

webpack でパッケージ化する際に、Source Mapプログラムを追加で生成することができ、圧縮されたコードと実際のファイルをマッピングします。例外が発生したときにそれをマッピングし、オンライン後に Source Map のマッピングを削除します。

パフォーマンス#

パフォーマンスパネルでは、レポートを生成できます。以下を含みます。

ネットワーク#

ネットワークリクエストのパネルを表示し、リクエストヘッダー / レスポンスなどを確認します。

アプリケーション#

このパネルはローカルストレージに関連する情報を表示します。

ローカルストレージ
セッションストレージ
IndexedDB
Web SQL
クッキー

小技：このパネルの Storage パネル内の Clear Site Data をクリックすると、そのウェブページのローカルストレージデータをクリアできます。ブラウザの設定を開いてクリアする必要はありません。

モバイル端末 H5 デバッグ#

実機デバッグ#

iOS#

Lightning ケーブルを使用して iPhone を Mac に接続します。
iPhone で Web インスペクタを有効にします（設定 -> Safari -> 高度 -> Web インスペクタを有効にする）。
iPhone で Safari ブラウザを使用してデバッグしたいページを開きます。
Mac で Safari ブラウザを開き、デバッグします（メニューバー -> 開発 -> iPhone デバイス名 -> デバッグページを選択）。
ポップアップした Safari Developer Tools でデバッグします。

iPhone デバイスがない場合は、Mac AppStore から Xcode をインストールして、その内蔵の iOS シミュレーターを使用できます。

Android#

USB ケーブルを使用してスマートフォンをコンピュータに接続します。
スマートフォンで開発者モードに入ります。USB デバッグをチェックし、デバッグを許可します。
コンピュータで Chrome ブラウザを開き、アドレスバーに次を入力します: chrome://inspect/1devices、Discover USB devices オプションをチェックします。
スマートフォンでリモートデバッグを許可し、デバッグページにアクセスします。
コンピュータで inspect ボタンをクリックします 8622。
デバッグインターフェースに入ります。

この方法は一般的には推奨されません。直接スマートフォンで QR コードをスキャンして見る方が体験が良いです。

プロキシデバッグ#

以前はスマートフォンを使用して Fiddler でプロキシを変更してパケットをキャプチャしていましたが、今ではプロキシツールを使用してスマートフォン上でフロントエンドページをデバッグすることもできます。原理は以下の通りです：

コンピュータをプロキシサーバーとして使用
スマートフォンが HTTP プロキシを介してコンピュータに接続
スマートフォンのリクエストはすべてプロキシサーバーを経由します。

先生が授業で使用していたのは Charles の例ですが、私は以前スマートフォンでパケットをキャプチャした例を挙げました。実際に動作することを確認しました。詳細な手順はこのブログを参照してください。HTTPS リクエストをキャプチャするには証明書をインストールする必要があります。【fiddler】用 fiddler 実現 android スマートフォンのパケットキャプチャ_michaelwoshi のブログ - CSDN ブログ_fiddler スマートフォンのパケットキャプチャ

プロキシを変更したら、スマートフォンで開発環境のページにアクセスできるようになります！他の一般的なツールは以下の通りです：

よく使う開発デバッグテクニック#

オンラインでの即時修正 Override#

Sources パネルの Overrides を開きます。
Select folders for Overrides をクリックします。ローカルの空のフォルダディレクトリを選択します。
認証を許可します。
ページ内でコードを修正し、修正が完了したら保存します。
devTools を開き、右上の 3 つの小さな点をクリック -> More tools -> Changes をクリックすると、すべての修正が表示されます。

記録が非常に直感的で、修正後にリフレッシュしても消えません。また、どの部分を修正したかも確認できます。

プロキシを利用して開発段階のクロスオリジン問題を解決#

ブラウザ自体には同一オリジンポリシーがあり、異なるオリジンのリクエストはクロスオリジン問題を引き起こします。つまり、プロトコル、IP、ポート番号のいずれかが異なると、クロスオリジン問題が発生します。

ローカルソースマップを有効にする#

オンラインに Source Map が存在しない場合、Map Local ネットワークマッピング機能を使用してローカルの Source Map ファイルにアクセスできます。

小さな黄色いアヒルデバッグ法！#

伝説のプログラムマスターは常に小さな黄色いアヒルを持ち歩き、コードをデバッグする際にそのアヒルをテーブルの上に置き、各行のコードを詳細にアヒルに説明し、すぐに問題を特定し修正することができました。

——《プログラマーの修練の道》

これが由来だったのですね 233333。これは自分の問題の論理を整理するのに良い方法です。

まとめと感想#

フロントエンド開発のデバッグも非常に重要な一環であり、この授業では PC 端の Google デベロッパーツールの使用とモバイル端開発のデバッグについて非常に詳細に説明され、非常に有益でした。

本文で引用した内容の大部分は、ハゲ頭のマントの先生（？）の授業、MDN、および外部ブログからのものです。【fiddler】用 fiddler 実現 android スマートフォンのパケットキャプチャ_michaelwoshi のブログ - CSDN ブログ_fiddler スマートフォンのパケットキャプチャ