フロントエンドエラー処理とデバッグ
5098 ワード
エラー処理
try-catch-finally
エラー・タイプ7の
カスタムエラー
エラー・イベント
よくあるエラー・タイプ
デバッグ
ブレークポイントデバッグ
最も一般的なのはコードの中でdebuggerを使うことですが、これよりもChromeのsourceを開く方法があります.ショートカットキー
コンソールデバッグ
コードの中で直接プログラム実行プロセス を制御できない.は最終結果しか出力できず、デバッグ性が悪く、参照タイプのデータを出力すると改ざんされて知らない可能性が高い. runtimeでデータを変更できない
try-catch-finally
try catch
適用シーン:制御できないエラーの処理を適用し、一般的にthrow
とエラーを投げ出してeg:見知らぬ呼び出しライブラリで使用します.使用時にコードのメンテナンス性を向上させるために、コメントを付けます.エラー・タイプ7の
Error
のすべてのエラーは、このEvalError
に継承されます.関数呼び出しeval関数でない場合、このエラーが報告されます.eg:new eval()、eval = foo
RangeError
有効範囲を超えた場合、このエラーeg:new Array(Number.MAX_VALUE)
ReferenceError
参照エラーeg:console.log(a)
SyntaxError
eg:console.log(a++b)
TypeError
eg:Function.prototype.toString.call(1)
URIError
解釈が規範化されていないURL時報エラー.eg: decodeURIComponent('%')
カスタムエラー
function myError (message) {
this.name = 'errorName';
this.message = message;
}
myError.prototype = new Error();
myError.prototype.constructor = myError;
throw new myError(" ");
エラー・イベント
try-catch
で処理されていないエラーは、windowオブジェクトのerrorイベントをトリガーします./**
*
*/
window.onerror = function (message, url, line ) {
//
return true; // Boolean true ,false
}
よくあるエラー・タイプ
1.
eg:`5 == '5'、1=='true'、if (typeOf variable=== 'String')`
2.
function Fn (value) {
if ( value ) {
value.sort();
}
if ( value !== undefined ) {
....
}
}
3.
server server
デバッグ
ブレークポイントデバッグ
最も一般的なのはコードの中でdebuggerを使うことですが、これよりもChromeのsourceを開く方法があります.ショートカットキー
ctrl + o
またはctrl + p
はターゲットファイル名を入力し、ファイルの左側で勝手に点を折ることができます.効果はdebuggerと同じです.右側にはWatch、Call Stack、Scope Watchという補助的な機能がいくつかあります.実行前のブレークポイントが存在する役割ドメインの任意の式の結果を監視し、中のデータを変更することができます.**Call Stack:**はスタックを呼び出し、任意のターゲット**Scope:**の現在のブレークポイント役割ドメインおよびすべての閉パッケージ役割ドメイン、およびグローバル役割ドメインにすばやくジャンプできます.コンソールデバッグ
コードの中で直接
console.log()
で、このように直接コンソールに出力することができますが、ブレークポイントデバッグに比べて劣勢です.