使用ブレークポイントのデバッグコード

簡単に言えば、ブレークポイントデバッグは、行の設定ブレークポイントで自分自身にデバッガを指し、プログラムが行に実行を停止します、あなたは、デバッグ段階的にダウンすることができ、デバッグプロセスは、各可変電流を見ることができます値が、間違って、エラーでデバッグするコードの間違った行、停止。

Web開発では、コードブレークポイントが頻繁に使用される方法で、デバッグ、今ここでこの機能をどのような公式の説明を簡単に翻訳だ、と彼自身の説明の一部を挿入します。

:から翻訳記事HTTPS://developers.google.com ...

いつ、どのような利用へのブレークポイントの種類:

コード・オブ・ライン:デベロッパーツールでは、ドットの領域にあるために特定のコードを知っています。

条件付きラインのコード:デベロッパーツールが印象的なエリアと設定条件に特定のコードを知っている、唯一の操作は本当に唯一の実行ブレークポイントです。

DOM:ボディ、追加、削除、および検出ノードまたは子ノードの属性変更に加えます。

XHR:RBI URL XHRで特定の種類のコンテンツ。

リスナーイベント:トリガされたときに特定のイベントRBI。

例外:スローRBI。

機能:特定の関数が呼び出されるRBI。

デバッガ:手動RBI RBIことを期待して書かれたコードでは、


ブレークポイントのメソッド

ライン・オブ・コードのブレークポイント

ブラウザはRBIを(コードの行を含まない)を解析するためのコードの行の前に動作を実行します。

操作:F12 - > [ソース]タブ - 開いているファイルへ>をダブルクリックはRBIが必要 - > RBIへのコードのニーズの行を探します - >青いマークが表示され、数直線上でクリックし、RBIが完了しました。

マークをもう一度クリックして、現在のブレークポイントを削除します。

clipboard.png

同じ指定された位置に懸濁することができるコード・デバッガを入力して、デベロッパーツールUIおよびラインのコードブレークポイントが等しい場合を除いて設けられていません。

console.log('a');

console.log('b');

debugger;  //在此暂停

console.log('c');


条件付きライン・オブ・コードのブレークポイント

あなたは条件付きでRBIにしたいとき、条件付きライン・オブ・コードメソッドを使用します。

操作:F12 - >入力してクリックし、表示される - > [ソース]タブを - >開いているファイルをダブルクリックは、RBIが必要 - > RBIへのコードのニーズの行を探します - >正しい行数を、条件付きブレークポイントの追加]を選択します - が表示されますが、その>]ダイアログボックスの[入力条件オレンジ色の看板、RBIが完了しました。

clipboard.png


ブレークポイントを管理します

ブレークポイントパネル上のすべてのブレークポイントを一元管理。

clipboard.png

ショー上記画像は、ページが2つのブレークポイントは、Get-started.js線15で1行32を有しています。

●  checkbox 选择启用禁用断点

●   在条目上右键,可以选择移除当前断点、停用当前断点、禁用所有断点、移除所有断点、移除其他断点。

      禁用所有断点相当于把所有 checkbox 的勾都去掉;

      停用当前断点会让浏览器忽略掉此断点,但是断点位置和图标仍然保留,以便再次激活使用;

      移除断点会直接去掉此断点;


DOMの変更ブレークポイント

ドキュメントノードの時間変化を一時停止します。

操作:F12 - >要素のタブ - >希望の監視ノードをクリックしてください - >ノードを右クリック - >が表示されますが、そのメニューの中にブレークを選択 - >必要に応じて、サブツリーの変更、属性の変更、ノードの削除を選択します。

clipboard.png

DOM変更ブレークポイントの種類:

●    subtree modifications , 在当前节点的子节点发生增加、移除、内容改变、交换顺序的情况的时候生效。其他情况例如当前节点发生了变化,或者子节点的属性发生了变化都不会触发。

●    attributes modifications , 在当前节点的属性发生变化,例如增加属性、移除属性、属性值改变 的时候触发。

●    node removal, 在当前节点被移除的时候触发。


XHRブレークポイント

あなたはXHR特定の要求、利用XHRブレークポイントを聴きたいときに。特定の文字列を指定して、XHR URLは、この文字列が表示されますが含まれている場合は、デベロッパーツール()メソッドは中断xhr.sendの代わりに呼び出されますトリガ。

XHRフェッチ要求のブレークポイントも有効です。

いくつかのためにブラウザが呼び出されている場所を見つけることができない、そのようなjQueryのAJAXの方法として、XHRリクエストの良いパッケージでした。

操作: f12 -> Source Tab -> XHR Breakpoints 面板 -> 点击 + 号 -> 在出现的对话框里输入指定的字符串,浏览器会在出现包含此字符串的 xhr 请求时暂停(无论字符串在 url 的哪个位置) -> enter , 完成断点。

clipboard.png


Event listener breakpoints

监测事件,在事件发生后暂停,断点到事件绑定的位置。支持单独的事件例如 click , 也支持一整个类别的事件,例如所有的鼠标事件。

操作: f12 -> Source Tab -> 展开 Event Listener Breakpoints 面板,会列出所有能监听的事件 -> 全选或展开之后单独选事件,完成断点。

clipboard.png

上图是在移动设备的手持装置方向事件(横竖屏转换)上打点。


Exception breakpoints

在你希望捕捉到报异常的代码的时候,使用 exception breakpoints。

操作: f12 -> Source Tab -> 点击 Pause on exceptions 暂停图标 -> 图标变成蓝色,表明启用了在未捕获到的异常出现的时候断点的功能。

可选操作: 勾选 Pause On Caught Exceptions , 能够在捕获到异常的情况下也断点。

try{

    throw 'a exception';

}catch(e){

    console.log(e);

}

上面 try 里面的代码会遇到异常,但是后面的 catch 代码能够捕获该异常。如果是所有异常都中断(勾选了 Pause On Caught Exceptions),那么代码执行到会产生异常的 throw 语句时就会自动中断;而如果是仅遇到未捕获异常才中断,那么这里就不会中断。一般我们会更关心遇到未捕获异常的情况。

clipboard.png


Function breakpoints

在你希望 debug 一个具体的函数时使用。功能与在此函数的第一行代码出打断点是一样的。

:挿入デバッグ(functionNameを)は、コード内またはブラウザコンソールで呼び出します。

挿入コード:

function sum(a,b){

    let result = a+b;  // 浏览器在这里暂停

    return result;

};

debug  (sum);  // 参数是一个函数,不是字符串

sum();

コンソールの呼び出し:

コンソール入力デバッグ(合計)は、クリックして入力し、和演算をトリガーするには、改ページを入力します。

それ以外の場合は、にReferenceError報告されます、同じスコープの内部でその目的関数およびデバッグ機能を確保するために取られるには:

clipboard.png

おすすめ

転載: www.cnblogs.com/baimeishaoxia/p/12187609.html