Chrome スキルでよくわからないことを記録します before_html/css_WEB-ITnose

何年もChromeを使っているのか分かりませんが、まだ慣れていないテクニックがいくつかあるので、便利なものと慣れていないものを記録します

方法dom のバインディング イベントを表示します (jquery のバインディング イベントを表示します)

新しいバージョンのネットワークの型オプションはどこにありますか?

ソースで必要なリソースを見つけ、js ファイルで特定の関数を見つけます

フォーマットjs、(独自のローカル js のフォーマットにも役立ちます)

ブレークポイント、dom ブレークポイント、xhr ブレークポイント、例外ブレークポイントを指定します

いくつかの問題が発生しました

dom のバインディング イベントを確認する方法 (jquery のバインディング イベントを確認する) )

domのバインディングイベントを表示します。これは非常に必要なスキルです。Chromeサポートも非常に優れています

下の図に示すように、Event ListenersでdomとlistenersBodyを選択します

問題はこれからです

listensBody がまったく表示されないのですが、どうすればよいですか?

listenersBody で、この行でマウスの右ボタンをクリックすると、グローバル変数として保存するポップアップ ボックスが表示されます

グローバル変数として保存をクリックし、そして関数全体がコンソールに表示されます

問題はまたここにあります

現在多くの人がjs jqを書くためにそれを使用していますが、元のバインディングイベントは表示されません

私の知る限り、バインディング イベントを確認する 2 つの方法

1. chorme プラグイン Visual-Event をダウンロードします

さて、ここでまた問題が発生します はい、中国では Chrome ウェブストアを開くことができません

解決策は FQ または

このアドレスから crx をダウンロードし、手動でインストールします

Visual-Event をインストールした後、目のようなアイコンをクリックしてマウスを置きます。バインドされたイベントが表示する必要のある dom に表示されます

2. dom 属性と $.cache メソッドを通じて見つけます

イベントを表示したい dom を選択します

以下に示すようにその属性 (jquery+paragraph 数値属性) を表示します

属性値を取得し、$.cache [attribute] と入力しますコンソール タブで [値] をクリックして展開し、バインドされたイベントを表示します

新しいバージョンのネットワークのタイプ オプションはどこにありますか?

カテゴリ (ドキュメント、画像、スクリプト、 xhr...) を新しい Chrome で直接

小さなファネルがあるので、それをクリックすると表示されます

ソースで、js ファイル内で必要なリソースと関数を見つけます

場合によっては、 js ファイルを見つけます。これを行うことができます

1. [ソース] タブを開きます

2. Ctrl+p を押します

3. 探している js ファイルの名前を入力します

もちろん、これは単にスマートなだけではありません。 js、html、cssの検索も可能です

jsで特定の関数を見つける必要がある場合があります

1. まずjsファイルを選択します(必須)

2.crtl+shift+o

場合js ファイルを選択せず​​に crtl+shift+o を押してタグ マネージャーを開きます

js をフォーマットします (独自のローカル js をフォーマットするのにも役立ちます)

js をフォーマットします。中括弧を使用します。

インターネット上の JS は圧縮され、マージされます。中括弧を使用してインターネット上の JS をフォーマットします

もちろん、中括弧を使用してローカル JS をフォーマットし、開いた JS にローカル JS を貼り付け、中括弧を押すこともできます

これ書式設定中括弧はソース タブでのみ使用できます

ブレークポイント、Give dom ブレークポイント、xhr ブレークポイント、例外ブレークポイント

dom ブレークポイント

dom ブレークポイントには 3 つの形式があります

1.サブツリーの変更 (監視対象の dom 子ノードが変更されます) )

2.属性の変更 (監視対象の dom 属性の変更)

3.ノードの削除 (監視対象の dom が削除された場合)

これらのブレークポイントを設定した後、変更を監視すると、ブレークポイント以降の js が変更される場所が変更されます。壊れる

例えば、削除すると壊れます 削除されたjsの場所をクリックします

ブレークポイントの設定方法は？

1. 要素パネルを開きます

2. DOM 要素を選択して右クリックします

3. [break on...] を選択すると、3 つのブレークポイント メソッドが表示されます

xhr ブレークポイント

xhr ブレークポイントを付与した後、リクエストを開始した js の場所に入ることができます

操作は次のとおりです

1. ソースタブを開きます

2. XHR ブレークポイントがあります

3.その後ろに + 記号があります。+ 記号をクリックして追加します

特定の xhr のみをブレークポイントしたい場合は、図に示すようにそのアドレスを入力します

ブレークポイントを削除したい場合は、を選択してマウスをクリック 右クリックで削除

例外ブレークポイント

jsが例外をスローする場所を特定できるのでトラブルシューティングに便利です

操作は以下の通りです

1．ソースタブに入ります

2. 下の図に示すように、丸いボタンをクリックします

いくつかの問題が発生しました

プラグインをダウンロードしたいのに、Chrome ウェブストアを開けない場合はどうすればよいですか?

私は FQ ができる Chrome Changyou バージョンを使用しています

ウェブサイトのパフォーマンスをテストするために公式 Chrome プラグインの Pagespeed Insights を使用しましたが、いつも途中で止まってしまいますか?

それは壁のせいです、FQ テスト

オンライン js ファイルをデバッグするにはどうすればよいですか?

1.

2 をフィドラーに置き換えます。 js ファイルの場合、読み込み時にエラーが報告されない形式でブレークポイントを設定でき、元の非圧縮コードを直接コピーして実行できます