コード賢いデバッガを使う

私は昨日、友人が問題をデバッグするのを手伝っていました.彼はPHPを学び始め、HTML/CSS/JSでauthログインページを構築しました.
バグは奇妙だった-彼のクライアント側のJavaScriptのif文は常にfalseに解決した.

if (response.html == "OK") {
  // Response Success
  console.log("This Print Statement Never Executes")
} else {
  // Error Occurred
  console.log("This Print Statement Always Executes")
}

理由は不明であったresponse.html は"OK "に等しくない.バックエンドのログは細かく見え、クライアントネットワークログは応答でOKを示しました.
私の友人は、地獄が起こっていたものを理解しようとして、一日を過ごしました.彼は最終的に私を呼んで、私が見られるかどうか尋ねました.

瞬間

最初の検査では、すべてがうまく見えた.私は、これがなぜ働かなかったかについて、すぐに話すことができませんでした.それで、デバッガを始めるためにクロムdevtoolsに飛び込んだ.
我々はいくつかのブレークポイントを置き、問題を1分で見つけた.バックエンドレスポンスは"\nok "であった.片方のnewline 問題でした.

私の友人は、デバッグに代わるものがあると信じることができませんでしたconsole.log() . 私は彼のコードにブレークポイントを配置する方法を示し、彼のコード半ば実行を一時停止し、プログラムの状態をチェックし、この情報を使用して、なぜ物事が動作していないかを把握します.
どのように幸せなことを見て、彼はこの話を共有する動機を与えた.あなたがバグで動けなくなって、問題を解決するために至る所で印刷声明を書くことを始めるならば、私はデバッガを使用するのを見たいと思います.
あなたがウェブ開発をしているならば、Chromeはブラウザに組み込まれた素晴らしいdevツールを持っています.Here are their docs クライアント側のJavaScriptアプリケーションでデバッグポイントを設定する方法について説明します.

結論

私の目標は、現在デバッガを使用していない人々を刺激することです.参考のために、私はデバッガで私の時間の少なくとも30 %を専門の開発者として過ごします.それがどのように有用です.
あなたが独学のトラックにいるならば、あなたはあなたの時間とエネルギーで機知に富む必要があります.デバッガを使用することで、より賢くないコードです.私はそれがはるかに簡単に旅をすることを保証します.

より多くのウェブdevのヒントをしたいですか？私に従ってください、そして、私のウェブdev会報を購読してください。

郵便Code Smarter; Use a Debugger 初登場💻 Web Dev With Seb .