1

私は C/C++/Objective-C の経験が豊富で、ここ数日 html/css/JS を試していて、とてもイライラしています。

コピー/貼り付けなどにより、構文エラーまたは宣言されていない変数があるため、何度も何度も見つけられました。その結果、コードが突然機能しなくなり、頭をかきむしって理由を突き止めなければなりません.

最もつらいのは、原因を追跡するために、何かが失敗した場合にすべてのコードにアラートをばらまくことに頼ることです。ロギング用の新しいコンソール オブジェクトがあることは知っていますが、Komodoedit や jsFiddle では機能しないようです。これは私が使ってきたものです。

これらのツールを使用する方法、または他の言語でできるように、デバッガーでコードを 1 行ずつステップ実行できる代替ツールはありますか? または、jslint に加えて、コードを実行する前にコードの問題を簡単に検出するためのトリックはありますか?

[ロギングなどのサポートが組み込まれている可能性のあるライブラリは使用したくありません。(JQuery/JQuery モバイルはそうですが) iPhone での読み込み時間を大幅に遅らせているので、純粋なライブラリに集中したいのです。 JS.]

[私のターゲット ブラウザは iOS だけですが、ほとんどの場合 Chrome で Komodoedit を使用しており、数時間ごとに iPhone で試しています]

ありがとう

4

4 に答える 4

5

いくつかのツールが必要です。

まず、実際のデバッガーを入手します。Chromeに組み込まれているものを使用しています。Firefoxのアドオンとして利用可能なSafariとFirebugに組み込まれている同様のものがあります。これにより、ブレークポイントを設定してコードをステップ実行し、何が起こっているかを正確に確認できます。

次に、 jsLintを介してコードを実行することに非常に慣れます。これにより、多くの明らかなタイプミスが示され、初日から堅牢なコードを作成するように促されます。

第三に、モードで書き込みを開始しstrictます。これにより、明らかなタイプミスを防ぎ、良い習慣を身に付けることができます。

第四に、必要に応じて使用console.log()します。デバッガーを作成すると、その出力は、jsFiddleページを含むブラウザーの任意のページのデバッガーのデバッグコンソールに表示されます。jsFiddleの適切なフレームでデバッガーを呼び出す必要があります。そうすれば、正常に動作します。私は通常のデバッガーとconsole.log()常にjsFiddleの両方を使用しています。jsFiddleとデバッガーでブレークポイントを設定する独自のコードを見つけるには少し時間がかかりますが、見つけたら簡単に使用できます。

第五に、javascriptは単にC++ではありません。構文は非常に馴染みがあるように見えますが、無名関数とクロージャ、オブジェクトとプロトタイプを使用する方法は大きく異なります。JavaScriptを学ぶ前に、何年もの間C ++でプログラミングしてきた私は、C ++でさらに多くの作業を行った、JavaScriptで今できることを非常に高く評価していますが、脳を新しい考え方に変えるには時間がかかりました。私は、JavaScript開発の最初の数年間、JavaScriptで目標を達成するためのより良い方法を学ぶだけでなく、C++技術をエミュレートしようとして多くの時間を費やしました。

第6に、エラーを検出するコンパイラがないため、コードの記述方法とテスト方法を変更する必要があります。C ++の時代、何かをリファクタリングする必要があったとき、たくさんの変更を加えてから、構文を修正するために必要な他のすべての場所をコンパイラーに見つけさせることができたのを覚えています。javascriptではそれを行うことはできません。大量の変更を行う場合は、jsLintを実行していくつかの問題を見つけることができます。次に、すべてが機能することを確認するために、文字通りすべてのパスを実行する必要があります。少し苦痛です。

第七に、ユニットテストのための戦略/ツールを見つけます。プロジェクトの長さが数個を超えると、重要な変更を加えたときにいつでも実行できる単体テストを構築することで大きなメリットが得られます。どちらも、単体テストがない場合よりもはるかに短い時間で問題を見つけることができます。また、単体テストですべてが再び働いています。将来的に何度も配当を支払うのは、前もって余分な作業です。

于 2012-09-06T22:29:34.783 に答える
0

Chromeを使用しているので、開発者コンソールを開く必要があります(スパナ->ツール-> javascriptコンソール、またはCtrl + Alt + J(推測で))。コードにアラートを振りかける代わりに、、、を使用してコードconsole.logconsole.error印刷console.infoします。これらはすべて可変個引数であるため、必要なだけ1つの呼び出しに渡すことができます。

これに加えて、コンソールを使用して、コードの一部をその場でテストおよび変更したり、いくつかのスニペットを試してそれらが機能するかどうかを確認したりできます。これは完全に機能するREPLであり、現在のドキュメントでも機能します。

開発者コンソールの[ソース]タブでは、ブレークポイントを設定してコードをステップ実行し、各ポイントの状態を分析できます。このページでは、それについて詳しく説明しています:http: //chromedevtools.googlecode.com/svn-history/r421/trunk/tutorials/breapoints/index.html

[要素]タブでは、属性や子ノードの変更など、DOM内の要素の変更にブレークポイントを設定できます。ノードを右クリックして、必要なオプションを選択します。これは、非同期でドキュメントを操作するコードをデバッグするときに便利です(たとえば、AJAX呼び出しで新しいコンテンツを挿入する場合)。

これに加えて、右側のスタイルペインの下部までスクロールして、イベントリスナーセクションを開くことができます。ここでは、選択したDOMノードにバインドされているすべてのイベントを検査できます。

コードに(セミコロンなしで)入力するdebuggerと、その時点で[ソース]タブが開き、コードをさらに詳しく調べることができます。これはChrome固有の可能性があると思います。

最後に、JSlintのようなツールは、コーディング時に宣言されていない変数を見つけるのに役立ちます。また、コードのフォーマットによって予期しないエラーが発生する場合もあります。構文の強調表示を使用して、未定義の変数に気付く場合もあります。

これも表面を削っているだけです。エディターとJSlintを使用すると、コード正しく表示してエラーなしで解析できますが、ブラウザーとそのコンソールは、ほとんどの時間を費やす場所です。

于 2012-09-06T22:45:29.743 に答える
0

これは、 javascriptをデバッグするためのツールのリストを取得する記事です。

于 2012-09-06T22:33:41.477 に答える
0

Firefox には、CSS/javascript のデバッグに非常に役立つ FireBug というアドオンがあります。もちろん、スクリプトをステップ実行する機能と、さまざまな JavaScript 式を試すことができるコマンド ラインがあります。Chromeにも同様の機能があると確信しています。

于 2012-09-06T22:28:18.493 に答える