` console 'を使用しないでください.log `を使い、devtoolsを使い始める🛠️

ローカルコードやプロダクションを使用しているかどうかに関係なく、ソースコードを変更したり、変更を再度押したりすることがなく、コードが間違っているのかを確認したい場合が多いです.ほとんどの人々は書くことから始めるconsole.log 彼らのコードベースを通しての声明とバグが起こっている場所を見つけるために一歩一歩進んでください.これは初心者にとってもソースコードにアクセスできる場所ですが、そんなに多くの時間を無駄にしたくないのか、ソースコードにアクセスしていないとしたらどうですか?

devtools
すべての主要なブラウザは、開発ツール(別名devtools)があります.それは私たちのWeb開発者がよく知っている私たちのアプリケーションをテストするために私たちの毎日のドライバとして使用して、彼らはかつての展開のようにどのように見えるだけでなく、何かが私たちが効率的にそれらを見つけることを望む時にも参照してくださいので、それらを知っていることが重要です.
それはあなたがロープを知っている場合、devtoolsは非常に便利なときです.devtoolは多くの機能を持っている記事を参照Chrome DevTools can do that? and FireFox DevTools can do that? これらのいくつかを垣間見ること.しかし、この記事では経験をデバッグするだけです.

バグ
共通の地面を持つことができるように、我々は修正するバグが必要です.創作したthis demo これはGlitch . このデモでは、日付を選択し、年齢計算ボタンを押します.それはあなたの年齢を計算し、下のセクションで表示されます.
しかし、時にはそれは1年よりも実際の年齢よりも年齢を計算するバグです.私たちはこの方法を修正する方法を調べています.

デバッガのデバッガ
ChromeとFirefoxの両方にデバッガのセクションがあります.私はそれがクロムと同じであるので、端を通過しません.

クロム
WindowsでCtrl + Shift + Jを使用してChromeでdevtoolを開くことができます.
いったん開き、ソースタブに移動します.ページが使用するファイルを検査できるファイルナビゲータウィンドウが表示されます.次に、ナビゲータのペインからファイルをクリックし、その内容を見てブラウザでローカルに編集することができます.最後にJavaScriptのデバッグペインが表示されます.

💡 If you resize the DevTools you might see these panes in different positions.

ファイアフォックス
Firefoxでは、WindowsまたはCtrl +オプション+ iでCtrl + Shift + Iを使用して、Web開発ツールを開く必要があります.
開くと、以前に見たものと非常に似ているデバッガタブをクリックします.左側には、ナビゲーションペインが表示されます.次に、エディタペインと左(または、DevToolsが開いているかどうかによって左側)がデバッグペインとなります.


ブレークポイントの設定
デバッグに関しては、一般的な方法はconsole.log 悪用されるコードベースのステートメント.

const yo = document.querySelector('#yo');

function getAge() {
    console.log('Getting the date of birth value');
    const dateString = document.querySelector('#age').value;
    console.log(`date of birth is ${dateString}`);
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    console.log(`age is ${age}`);
    var m = today.getMonth() - birthDate.getMonth();
    console.log(`Birth month is ${m}`);
    if (m < 0 || (m = 0 && today.getDate() < birthDate.getDate())) {
      console.log('The birth month is negative or is zero, we need to reduce the age by one year');
      age--;
      console.log(`Real age is ${age}`);
    }
   yo.textContent = age;
}

それから、あなたはコンソールがどこでバグがあるかもしれないかについて見るために見ます.しかし、このプロセスは苦労してあなたの生産性に多大な影響を与える.それで、ブレークポイントがどのように我々が本当の点で点に着くのを手伝うかについて見ましょう.
ブレークポイントは、実際の時間に比べている利点がありますconsole.log コードを展開してコンソールを検査するのを待つ必要があるステートメント.それとは別にconsole.log ステートメントを使用すると、ブレークポイントデバッガーですべての値が表示されますが、期待する値を明示的に指定する必要があります.
さあ、一歩一歩戻って、ブレークポイントを設定する場所を見つける方法を見てみましょう.このようにいくつかのケースでは、あなたはOKと思う、年齢は時々、他の他の月に応じて正しいです.それで、あなたはあなたのファイルを見つけて、あなたのブレークポイントをセットしますif コンディション.
コードベースがより大きいかもしれないか、チームにとって新しいかもしれない他の場合では、ページの流れに従うことは意味があります.私たちの場合、ユーザーは日付を選択し、年齢計算ボタンをクリックします.
その背後にあるロジックは、Clickイベントリスナーにブレークポイントを設定することです.イベントリスナーのブレークポイントは、このために設計されています.

クロム
Chromeで、[デバッグ]ページで、イベントリスナーのブレークポイントをクリックし、セクションを展開します.次にマウスカテゴリを見つけ、Clickイベントを選択します.

現在の年齢ボタンをクリックしてDevToolsを一時停止するときにイベントリスナーが実行されます.再開スクリプトの実行をクリックする必要があるかもしれません
あなたがグリッチのようなプラットフォームを使用している場合は、必要ではない自分のアプリのために.ブレークポイントがHTMLのボタンに達すると、Step to Function そして、あなたは我々の中で終わりますgetAge 関数.一度あなたが望んでいる機能に踏み込んだなら、あなたはステップオーバーボタンをクリックしたり、F 10を押すことによって一度に1行に行くことができます.


ファイアフォックス
Firefoxでマウスクリックイベントリスナーのブレークポイントを有効にするには、同じアプローチを使用して、単にデバッガペインのイベントリスナーのブレークポイントセクションを展開し、マウスを展開し、Clickイベントを選択します.

一度有効にすると、前に説明したのと同じ手順に従うことができます.ボタンを計算し、デバッガを自動的に最初の関数呼び出しを一時停止します.グリッチやcodepenのようなプラットフォームを使用する場合、それはあなたが後にしているものではないかもしれないので、単に再開を押してください.
ボタンをクリックすると、ブレークポイントがgetAge 関数.次に、ステップ3をクリックします ボタンを押すかF 11キーを押します.一度機能の中では、単にステップオーバーを押している ボタンまたはF 11の行から行に移動します.


ラインブレークポイント
行ブレークポイントは、主にバグが実際にあるところを狭めたときに使用されます.我々が我々を通したとき、我々のケースでgetAge 機能は、我々は年齢が年に基づいて計算されていることを見て、その後、月が現在の月よりも低い場合は1ヶ月で年齢を減らすために責任を負うif条件があります出生月.
したがって、私たちは大まかに年齢がいくつかのケースで右に計算されて、1年によって間違って計算されるならば、if条件が我々が我々の線ブレークポイントをセットしなければならないところであるということを知っています.
devtoolsでこれを行うには2つの方法があります.しかし、あらかじめファイル名を知っているならば、あなたは単にエディタペインでファイルを開くことができて、あなたが望む線に達するまでスクロールします.
したら、単に行番号をクリックし、そこにある行ブレークポイントを置く あなたがブレークポイントがどこにセットされるかについてわかっているように、その線の上のアイコン.単にもう一度それをクリックしてブレークポイントを削除することができます.

現在の年齢ボタンをクリックすると、プログラムはif条件で停止します.この部分は、ChromeとFirefoxの両方でまったく同じです.

変数値のチェック
if条件で停止した場合、変数の値が何かを見たい場合は、FirefoxのChromeまたはScopesセクションのデバッガペインのスコープセクションを見てください.

クロム


ファイアフォックス


バグのスポッティング
ここで、バグがどこにあるか、それを修正する方法を見てみましょう.if条件がより密接に見られるならば、そこに2つの主要な部分があるのを見るでしょう.ファーストワンm < 0 月がゼロ以下であるかどうかをチェックするm = 0 && today.getDate() < birthDate.getDate() 月がゼロで、今日が誕生日より小さいかどうかチェックする.
現在、我々は誰かがこのバグを引き起こした等値演算子の代わりに等しい徴候を使用したということを知っています.では、次のように置き換えます= with === その後、Ctrl + Sキーを押して変更を保存します.ブレークポイントを残すか、またはバグが修正されているかどうかを確認するいくつかの日付でテストを削除します.しかし、いくつかのテストの後、我々はバグが修正されていることを知っている.あなたが再び同じバグに直面しないように、この機能のテストを行って、書く時間です😁.

コンソールウィンドウ
ブラウザのコンソールウィンドウで式を評価できることを忘れないでください.あなたのように、単にコンソールにあなたの状態を置くことができて、それが戻っているかどうか見ることができましたtrue or false .


他に何か
あなたが提供する条件がある場合にのみトリガされる条件付きブレークポイントなどの他のブレークポイントのヒープがありますtrue , URLがキャッチされたときとキャッチされない例外のブレークポイント、および設定された部分文字列にマッチするときにトリガされるXHRブレークポイント.XHRブレークポイントを試してみて、devtoolを開き、ペインをデバッグしてXHRブレークポイントのセクションを開きましょう.行を追加するにはraw を押してEnterキーを押します.今すぐページをリフレッシュし、ブレークポイントが要求されたときにヒット表示されます.これで、以前に見たのと同じテクニックを使用して、コードにステップインし、さらにデバッグするようなブレークポイントを設定できます.

小さなキャッチ
つのキャッチは、デバッツールを使用している場合は、デバッグしている機能がトリッキーであることを確認する必要があることです.それを動作させるには、関数がスコープ内のどこかに線ブレークポイントを設定し、ブレークポイントとコールをトリガーする必要がありますdebug() コードがまだラインブレークポイントで休止している間、devtoolsコンソールで.

(function () {
  function hello() {
    console.log('hello');
  }
  function world() {
    console.log(' world');
  }
  hello(yo); // This works.
  world();
})();
debug(hello); // This doesn't work. hey() is out of scope.

概要
私たちは、devtoolがどれほど強力であるかを見ました、そして、彼らがどれくらい我々が我々のコードでバグを見つけて、修正するのを手伝うことができるかについて見ました.だから使用を停止console.log そして、より良いあなたのdevtoolsを知るようになる.自宅からハッピーコーディング❤️.