フロントエンドエラー処理とデバッグ

5098 ワード

エラー処理
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()で、このように直接コンソールに出力することができますが、ブレークポイントデバッグに比べて劣勢です.
  • プログラム実行プロセス
  • を制御できない.
  • は最終結果しか出力できず、デバッグ性が悪く、参照タイプのデータを出力すると改ざんされて知らない可能性が高い.
  • runtimeでデータを変更できない