ホームページ ウェブフロントエンド jsチュートリアル JavaScript エラー処理とデバッグの経験の概要_JavaScript スキル

JavaScript エラー処理とデバッグの経験の概要_JavaScript スキル

May 16, 2016 pm 06:21 PM
デバッグ エラー処理

ここでは、JS エラー処理およびデバッグ方法の概要を示します。
方法 1: 変数値を監視するには、alert() メソッドと document.write() メソッドを使用します。
alert() は、ユーザーが [OK] ボタンをクリックするまで、変数値を表示するダイアログ ボックスが表示されている間、コードの実行を停止します。一方、document.write() は、その後、コードの実行を継続します。値を出力しています。 JS をデバッグするときは、特定の状況に応じてこの方法を選択できます。
たとえば、次のコード: 配列 a の 1 から始まるデータを配列 b に追加します

コードをコピーします コードは次のとおりです:




無題ページ</タイトル> <br><script type="text/javascript"> <br>var a=["123","456","789","111"]; ) <br>{ <br>var b=new Array("1111"); <br>for(var i=0;i<a.length>{ <br>if(a[i] .indexOf( "1")!=0) <br>{ <br>alert(a[i]) <br>b.push(a[i]); <br>} <br>} <br> } <br></script> <br></head> <br><input type="button" value="クリックしてください" onclick="AlertMessage()"/ > <br></body> <br></html> <br><br> <br> 多くの値を追加する場合は、「OK」をクリックする必要がなくなります。ボタンを繰り返し押します。 </a.length> </div> <br>方法 2: onerror イベントを使用してエラーを見つけます。<br><strong>ページで例外が発生すると、ウィンドウ オブジェクトでエラー イベントがトリガーされます。特定のプログラムでエラーが発生したため、次の例のように、開発者がエラーを見つけられるようにします。 <br></strong><br><div class="codetitle"> <span>コードをコピー <a style="CURSOR: pointer" data="98995" class="copybut" id="copybut98995" onclick="doCopy('code98995')"><u></u> コードは次のとおりです。次のように: </a></span> </div>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <div class="codebody" id="code98995"><html xmlns="http://www.w3.org/1999/xhtml" > <br><head> <br><title>無題ページ< /title> <br><script type=" text/javascript"> <br>window.onerror=function() <br>{ <br>alert("申し訳ありません、問題が発生しました!"); } <br></script> <br><body> <br></html> ><br> <br> <br><br> コードが <br>body<br> でマークされた </div>onload<br> イベントを実行すると、存在しない関数 <p style="TEXT-INDENT: 21pt; TEXT-ALIGN: left" align="left"><span style="FONT-FAMILY: 宋体">NonExist() が呼び出されます。この関数は、によって生成されます。 </span><span style="FONT-FAMILY: 宋体"> 以下に示すようにエラーが発生しました: </span><span style="FONT-FAMILY: 宋体"></span> <span style="FONT-SIZE: 9pt; FONT-FAMILY: 新宋体"></span>同時に、ブラウザ自体のコード デバッグ エラーも表示されました: <span style="FONT-SIZE: 9pt; FONT-FAMILY: 新宋体"> </span> </p> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201008/20100810005859275.png" class="lazy" style="max-width:90%" alt="" style="max-width:90%">ブラウザ自体のエラー メッセージを回避するのは非常に簡単です。<br>onerror<span style="FONT-FAMILY: 宋体"> イベントを処理し、最後に </span>ture<img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201008/20100810005859880.png" class="lazy" style="max-width:90%" alt="" style="max-width:90%"> を返すだけです。コードは次のとおりです。 🎜><p><span style="FONT-FAMILY: 宋体"></span><span style="FONT-FAMILY: 宋体">コードをコピー</span><span style="FONT-FAMILY: 宋体"><br> コードは次のとおりです:<div class="codetitle"> <span> <a style="CURSOR: pointer" data="76968" class="copybut" id="copybut76968" onclick="doCopy('code76968')"><!DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <u><html xmlns="http://www .w3.org/1999 /xhtml" > </u><head> </a><title>無題ページ >




エラーが解決しない。助けてください。実際、onerror はエラーの性質を決定する 3 つのパラメーターも提供します。 コード:




コードをコピーします

コードは次のとおりです。




<タイトル>


< ;body onload= "NonExist()" >



IE で実行されている場合のプロンプト:


Firefox
IE ブラウザでエラー イベントが発生すると、通常のコードが続行されます。実行すると、すべての変数とデータが保存され、onerror イベント ハンドラーを通じてアクセスできます。 Firefox では、通常のコードの実行が終了し、エラーが発生する前のすべての変数とデータが破棄されます。
方法 3: try….catch ステートメントを使用してエラーを見つけます。

コードをコピー コードは次のとおりです:



無題ページ

{
alert("は try...catch");
alert(hello);
}
catch(例外)
{
var error="";
for(var i は例外です)
{
error =i ":"例外[i] "n";
}
}
🎜>



IE
🎜>

Firefox
実行時のヒント:


try…..catch
で簡単に実行できます。間違った質問ですが、残念ながら、このステートメントはステートメント エラーを適切に処理できません。例:

コードをコピー コードは次のとおりです:
無題ページ


try语句里面出现了括号不匹配的错误,而整个代码并没有运行catch中的模块,而是浏览器弹出了错误提示框,如下图:


 

方法4:使用Firefox错误控制台调试:

Firefox菜单栏中选择“工具”->“错误控制台”,便可以打开它,所有浏览中运行的错误,警告,消息都会传错误控制台,如下:

 

 

Firefox提示的错误信息要比IE全面而且准确的多。

方法5:使用Firefox插件FireBug

FirebugFirefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScriptCSSHTMLAjax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。具体如何安装使用FireBug可参考这篇文章:http://apps.hi.baidu.com/share/detail/15314208

方法6:使用Miscrosoft Script Debugger调试:

IE菜单栏中打开“工具”->Internet选项“,选择”高级“,将”禁用脚本调试“复选框的勾去掉。

 

 

 

 

具体如何使用就不介绍了。

方法7:使用IE下的JS调试工具companion.js

一款像firefox中的firedebug工具类似的一个工具包,它的特点就是可以有好的提示错误,并且可以在IE浏览器下方出现控制台输出.方便及时调试。

具体可参考这篇文章:http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html

There are other JS debugging tools, so I won’t introduce them one by one. You can also introduce some better JS error handling methods or JS Debugging tools.

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

LeakSanitizer を使用して C++ メモリ リークをデバッグするにはどうすればよいですか? LeakSanitizer を使用して C++ メモリ リークをデバッグするにはどうすればよいですか? Jun 02, 2024 pm 09:46 PM

LeakSanitizer を使用して C++ メモリ リークをデバッグするにはどうすればよいですか? LeakSanitizer をインストールします。コンパイル フラグを介して LeakSanitizer を有効にします。アプリケーションを実行し、LeakSanitizer レポートを分析します。メモリ割り当てタイプと割り当て場所を特定します。メモリ リークを修正し、動的に割り当てられたメモリがすべて解放されるようにします。

例外処理を通じて C++ でエラー シナリオを効果的に処理するにはどうすればよいですか? 例外処理を通じて C++ でエラー シナリオを効果的に処理するにはどうすればよいですか? Jun 02, 2024 pm 12:38 PM

C++ では、例外処理は try-catch ブロックを通じてエラーを適切に処理します。一般的な例外の種類には、実行時エラー、論理エラー、範囲外エラーが含まれます。ファイルを開くエラー処理を例に挙げます。プログラムがファイルを開くのに失敗すると、例外がスローされ、エラー メッセージが出力され、catch ブロックを通じてエラー コードが返されます。これにより、プログラムを終了せずにエラーが処理されます。例外処理には、エラー処理の集中化、エラーの伝播、コードの堅牢性などの利点があります。

golang 関数のデバッグと分析へのショートカット golang 関数のデバッグと分析へのショートカット May 06, 2024 pm 10:42 PM

この記事では、実行の一時停止、変数の確認、ブレークポイントの設定に使用される組み込みデバッガー dlv など、Go 関数のデバッグと分析のためのショートカットを紹介します。ログ記録。ログ パッケージを使用してメッセージを記録し、デバッグ中に表示します。パフォーマンス分析ツール pprof は、コール グラフを生成してパフォーマンスを分析し、gotoolpprof を使用してデータを分析します。実際のケース: pprof を通じてメモリ リークを分析し、リークの原因となる関数を表示するコール グラフを生成します。

C++ クラス設計でエラー処理とログ記録を実行するにはどうすればよいですか? C++ クラス設計でエラー処理とログ記録を実行するにはどうすればよいですか? Jun 02, 2024 am 09:45 AM

C++ クラス設計におけるエラー処理とログ記録には、次のものが含まれます。 例外処理: カスタム例外クラスを使用して例外をキャッチして処理し、特定のエラー情報を提供します。エラー コード: 整数または列挙を使用してエラー状態を表し、戻り値で返します。アサーション: 事前条件と事後条件を確認し、条件が満たされない場合は例外をスローします。 C++ ライブラリのロギング: std::cerr および std::clog を使用した基本的なロギング。外部ログ ライブラリ: レベル フィルタリングやログ ファイル ローテーションなどの高度な機能を提供するサードパーティ ライブラリを統合します。カスタム ログ クラス: 独自のログ クラスを作成し、基礎となるメカニズムを抽象化し、さまざまなレベルの情報を記録するための共通インターフェイスを提供します。

Java 同時プログラミングで同時実行テストとデバッグを実行するにはどうすればよいですか? Java 同時プログラミングで同時実行テストとデバッグを実行するにはどうすればよいですか? May 09, 2024 am 09:33 AM

同時実行テストとデバッグ Java 同時プログラミングにおける同時実行テストとデバッグは非常に重要であり、次の手法が利用可能です。 同時実行テスト: 単体テスト: 単一の同時タスクを分離してテストします。統合テスト: 複数の同時タスク間の相互作用をテストします。負荷テスト: 高負荷時のアプリケーションのパフォーマンスとスケーラビリティを評価します。同時実行デバッグ: ブレークポイント: スレッドの実行を一時停止し、変数を検査するかコードを実行します。ロギング: スレッドのイベントとステータスを記録します。スタック トレース: 例外のソースを特定します。視覚化ツール: スレッドのアクティビティとリソースの使用状況を監視します。

PHP エラー処理に最適なツールとライブラリは何ですか? PHP エラー処理に最適なツールとライブラリは何ですか? May 09, 2024 pm 09:51 PM

PHP の最適なエラー処理ツールとライブラリには次のものがあります。 組み込みメソッド: set_error_handler() および error_get_last() サードパーティ ツールキット: Whoops (デバッグとエラーのフォーマット) サードパーティのサービス: Sentry (エラーの報告と監視) サードパーティライブラリ: PHP-error-handler (カスタム エラー ログおよびスタック トレース) および Monolog (エラー ログ ハンドラー)

PHP 非同期コードをデバッグする方法 PHP 非同期コードをデバッグする方法 May 31, 2024 am 09:08 AM

PHP 非同期コードをデバッグするためのツールには、次のものがあります。 Psalm: 潜在的なエラーを検出する静的分析ツール。 ParallelLint: 非同期コードを検査し、推奨事項を提供するツール。 Xdebug: セッションを有効にしてコードをステップ実行することで、PHP アプリケーションをデバッグするための拡張機能。その他のヒントには、ロギング、アサーションの使用、ローカルでのコードの実行、単体テストの作成などがあります。

PHP デバッグ エラー: よくある間違いへのガイド PHP デバッグ エラー: よくある間違いへのガイド Jun 05, 2024 pm 03:18 PM

一般的な PHP デバッグ エラーには次のものがあります。 構文エラー: コード構文をチェックして、エラーがないことを確認します。未定義の変数: 変数を使用する前に、変数が初期化され、値が割り当てられていることを確認してください。セミコロンの欠落: すべてのコード ブロックにセミコロンを追加します。関数が未定義です: 関数名のスペルが正しいことを確認し、正しいファイルまたは PHP 拡張子がロードされていることを確認してください。

See all articles