フロントエンドの子供靴の老婆として、あなたは Chrome ブラウザに精通しているはずだと思います。调页面、写BUG 、画样式、看php片、PHP がなければ全世界が役に立たなくなります。
信じられないですか？私たちの老婆がどれほど強力であるかを見てみましょう...
インターフェイスを共同でデバッグしたり、オンラインのバグをトラブルシューティングしたりするときに、次のような言葉をよく聞きます。エラーが発生した理由を見てみましょう!
リクエストを再送信する非常に簡単な方法があります。
Network
Fetch/XHR
再送信するリクエストを選択し、
右クリックしてReplay XHRを選択します。
ページを更新したり、ページを操作したりする必要はありません。とても便利だと思いませんか。 ！ ！
コンソールでリクエストを迅速に開始する場合や、共同デバッグやバグ修正を行う場合、同じリクエストに対して入力パラメータを変更して再開始する必要がある場合があります。
Network
Fetch/XHR
Copy as fetchを選択し
、コードを貼り付けて
パラメータを変更し、Enterを押して終了します。
以前は、コードを変更するか、 fetch手動で記述することで対処していました。それを考えるのは本当に愚かでした。
コードが計算されると、複雑なオブジェクトが出力されます。それをコピーして他の人に送信する必要があるのですが、どうすればよいでしょうか?
copy関数を使用して、对象を入力パラメータとして実行します
以前は、常にJSON.stringify(fetfishObj, null, 2)を介してコンソールに出力し、手動でコピーして貼り付けていました。これは非常に非効率でした。
Elements要素を選択した後、 JSを通じてその要素の属性 (宽、高、位置など) を知りたい場合はどうすればよいでしょうか。
Elementsでデバッグする要素を選択し
、 $0でコンソールに直接アクセスします。
場合によっては、Web ページのスクリーンショットを取得する必要があります。システムの組み込みスクリーンショットまたは WeChat スクリーンショットを実行する必要があります。 1つの画面でどうするか？
撮影する必要があるコンテンツを準備します。
cmd + shift + pコマンドを実行Command
、 Capture full size screenshot 」と入力して、Enter キーを押します。
選択した要素の一部を傍受したい場合はどうすればよいでしょうか?
答えも非常に簡単で、3 番目のステップでCapture node screenshot
。要素をデバッグするとき、レベルが比較的深い場合は、要素を 1 つずつ展開しますか?
optキーを押しながら (展開する必要がある最も外側の要素) をクリックする、
より速い方法があります
。
このシナリオを確認するために、特定の文字列に対してさまざまなプロセスが実行され、実行の各ステップの結果を知りたいと考えていると思います。どうすればいいでしょうか？ 。
'fatfish'.split('').reverse().join('') // hsiftafこれを行うとよいでしょう
// ステップ 1 'fatfish'.split('') // ['f', 'a ', 「t」、「f」、「i」、「s」、「h」]
// ステップ 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i '、'f'、't'、'a'、'f']
// ステップ 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf 
より簡単な方法は、
$_使用して、毎回コピーせずに前の操作の結果を参照することです
// ステップ 1 'fatfish'.split('') // ['f', 'a', 't', '魚']
// ステップ 2 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// ステップ 3 $_.join('') // hsiftaf
クロームの白のテーマを好む学生もいますが、ショートカット キーを使用して 2 つのテーマをすばやく切り替えることができます。
cmd + shift + p Commandコマンドを実行し
、 Switch to dark themeまたはSwitch to light themeと入力してテーマを切り替えます。
$ " および " $$ " セレクターは、コンソールでdocument.querySelectorおよびdocument.querySelectorAll使用して現在のページの要素を選択するための最も一般的な要件ですが、実際には少し長すぎます$を使用できます。そして$$の代替品。
$i npm パッケージをコンソールに直接インストールします。このような状況に遭遇したことがありますか? dayjsやlodashなどのAPI使用したい場合がありますが、公式 Web サイトにアクセスして確認するのは面倒です。コンソールで直接試すことができれば便利です。
Console Importer は、 npmパッケージをコンソールに直接インストールするために使用されるプラグインです。
Console Importerプラグイン
$i('name') をインストールして npm パッケージをインストールします
次のコードがあるとします。食品の名前が?どうすればよいでしょうか。
コンストフード = [
{
名前： '？'、
価格: 10
}、
{
名前： '？'、
価格: 15
}、
{
名前： '？'、
価格: 20
}、
】
food.forEach((v) => {
console.log(v.name, v.price)
})これは、大量のデータを使用し、条件が満たされた場合にのみ条件を解除したい場合に非常に便利です。想像してみてください。条件付きブレークポイントがない場合、デバッガーを n 回クリックする必要があるでしょうか?
(学習ビデオ共有: Web フロントエンド開発、プログラミングの基礎ビデオ)
上記は、効率を向上させる 11 の Chrome デバッグ スキルの詳細です。詳しくは、PHP 中国語 Web サイトの他の関連記事に注目してください。