作为一名程序员，就算你拥有大圣的 72 变，依然逃脱不了观音的紧箍咒；程序出 Bug 已是家常便饭，但解决问题的能力更加凸现你在公司的地位。本文结合自身实战经验，梳理日常开发中神一般的调试技巧。希望对各位大佬有所参考和借鉴，如有错误的地方，还请指正。
著者のプレゼンテーション
こんにちは、私は川の角、古いフロントエンド、通常の仕事は比較的忙しく、記事は頻繁に公開されていませんが、また、すべての櫛が友人に役立つことを願っています。
フロント·ホワイト
我曾出过不少课程，学生群也有十几个了，我遇到太多的学生了，一遇到问题，就在群里直接@我：我页面出不来了，快帮我看看 我代码跟你一样，就是不行 控制台报错，怎么办？ 怎么打断点 代码怎么调试？
正直に言うと、非常に無力です、私は特に彼らを理解することができます、ちょうど卒業したばかりで、白紙のように、仕事の経験がない、業界の彼らの認識はまだ低いので、問題が発生するたびに、一方では、問題をチェックするのを助けることですが、他方では、徐々に彼らの能力と問題解決方法を開発するのを助けたいと思います。
フロントドア·ルーキー
console法の制定
这个大家肯定不陌生了，遇到问题，可以通过 console 来输出日志，分析问题。
- console.log()
通常のログ出力は、フロントエンドで最も頻繁に使用される印刷方法です。
function Person() {
this.name = "jack";
this.age = 30;
}
let person = new Person();
// 查看person对象都有哪些属性和方法
console.log(person);
// 可以同时姓名和年龄
console.log(person.name, person.age);
// 也可以使用占位符进行输出
console.log("姓名：%s，年龄：%d", person.name, person.age);
出力は以下の通り。
テンプレート文字列は確かにプレースホルダよりも単純です。ここでは説明しません。
- console.warn()
用于控制台输出警告信息。同console.log用法一样，只是样式显示不同，通过 warn 方法输出，前面会显示黄色警告标志。
出力は以下の通り。
- console.info()
用于控制台输出说明信息。同 console.log 用法一样，样式也相同。
出力は以下の通り。
- console.error()
用于控制台输出错误信息。同console.log用法一样，只是样式显示不同，通过 error 方法输出，前面会显示错误图标。
出力は以下の通り。
- console.time()
如果想要获取一段代码执行时间，可使用 console.time() 进行计时，使用 console.timeEnd() 结束计时。
// 计时开始
console.time();
for (let i = 0; i < 1000; i++) {
// to-do
}
// 计时结束
console.timeEnd();
出力は以下の通り。
注意：
console.timeEnd()不可以单独使用，必须先定义console.time()否则，会提示：VM578:1 Timer 'default' does not exist
- console.count()
如果想要获取代码执行次数，可使用 console.count()。
for (let i = 0; i < 5; i++) {
// 次数统计
console.count();
}
出力は以下の通り。
パラメータを渡してマークすることもできます。例えば、console.count '回数'
以上是关于通过 console 打印来做调试的比较常用的几个方法，当然还有不少，比较冷门和低频的就不一一列举了。
debugger
除了 console 日志打印外，比较常用的就是 debugger 了，当程序出错或者找不到问题时，我们需要在代码中直接定义 debugger 来暂停程序执行，进而分析问题。
jsコピーコードlet list = [{ name 'jack' age 30 info { score 70} }{ name 'tom' age 28 }]
for (let item of list) {
debugger;
if (item.info.score > 60) {
console.log(`恭喜你：${item.name}`);
}
}
上述代码很明显会报错，如果程序再复杂一些，就需要我们断点调试了。通过 debugger，我们可以调试得知 item.info 为 null 导致程序报错。
デバッグは以下の通り：
Chromeブレークダウン
无论是在代码中写 console.log 还是 debugger 都是一种侵入式断点，解决问题以后，还需要手工清除，殊不知，浏览器本身也可以打断点？
以 Vue3 为例，我们打开控制台，找到源代码，通过 ctrl + p 搜索用户管理菜单文件 User.vue ，在想要断点的地方，直接点击即可生成断点。
誤って多くのブレークポイントを打った場合、すばやくクリアする方法は？
ブレークポイントに入った後、マウスを変数の上に置くと、その変数の値が表示され、オブジェクトの上に置くと、オブジェクトの下にあるプロパティとメソッドが表示され、右側のパネルには、ウォッチポイント、ブレークポイント、スコープ、コールスタックなどのパネルがあります。
Chromeが条件付きブレークポイントを追加
デバッグするコードがループである場合、条件が満たされるまで1つずつ実行し、対応する変数の値を確認する必要がありますが、時間の無駄であり、愚かな方法です。
- デバッグするコードスニペットの検索結果
- 条件付きブレークポイントの右選択
- ブレークポイントはuserId == 1000002のときにのみトリガーされます。
- ブレークポイントは条件が満たされたときにトリガーされます
条件付きブレーク、それは非常に良いです、爆発。
フロントエンドの王様。
再送信のリクエスト
バックエンドインターフェイスでデバッグすると、ページリクエストが速すぎて、バックエンドがログを見るのが遅すぎるので、バックエンドはフロントエンドになります：** もう一度リクエストを送信し、私は *** をデバッグしたので、私たちは愚かな、ページをリフレッシュし、私たちは知らない ** ブラウザは再送信リクエストを持っています **？
操作ステップ：
- コンソールを開く。
- Network中国语はNetworkを选択します。
- 再送信するインタフェースが見つかりました
- 右クリックReplay XHR中国語名Replay XHR
你就看到惊
リプレイをリクエストする前に、
リプレイのリクエスト後：
コンソールリクエストの送信
再送信要求時にパラメータを変更する必要がある場合はどうすればよいですか？
- コンソールを開く。
- Network中国语はNetworkを选択します。
- パラメータを変更するインタフェースの検出
- “≪コピー | Copy as fetch | Fetch ≫”を右クリックします。
- コンソール·インターフェイスで、貼り付け
- 要求パラメータを変更してリターンを入力する
- レプリケーション要求
- ページング·パラメータを2ページ目に変更する
- キャリッジリターン送信リクエスト
HTMLノードコピー
当页面布局出问题时，我们往往需要通过审查元素进行分析，同时也会在控制台通过 DOM API 来进行读写调试，但是 DOM API 操作起来过于麻烦，殊不知浏览器已自带 api 功能？
- 当选中要查看的
html节点时，会自动生成$0变量
- 控制台直接写
$0便会打印选中的节点
- 用
$或$$代替docuement.querySelector()
这简直太好用了，如果你还不知道，真的就
out了，chrome太懂前端了
JavaScriptオブジェクトのコピー #JavaScriptオブジェクトノコピー
有时候我们通过 console.log 打印了一个比较复杂的对象，但是需要一层一层展开进行查看，非常不方便，有什么好办法？
function Person() {
this.name = "jack";
this.age = 30;
}
let person = new Person();
// 查看person对象都有哪些属性和方法
console.log(person);
浏览器自带 copy 函数
1. 输入 copy(person)`
- 直接貼り付ける
コンソールは直接印刷オブジェクトをフォーマットし、もはやレイヤーごとに展開する必要がなく、泥棒に便利ではありません。
より良い変数は以下の通りです。
$// 简单理解就是 document.querySelector 而已。$$// 简单理解就是 document.querySelectorAll 而已。$_// 是上一个表达式的值$0-$4// 是最近 5 个 Elements 面板选中的 DOM 元素，待会会讲。dir// 其实就是 console.dirkeys// 取对象的键名, 返回键名组成的数组values// 取对象的值, 返回值组成的数组
ローカルファイルリモートの置換{{ろーくふぁいるりもーとの置換}}
我曾经遇到过一种场景，有一个项目已经部署到服务器上了，但是本地没有仓库代码，服务器全部是压缩的代码，我们要调试变得很困难，普通的做法就是下载服务器的压缩包到本地，通过 nginx 运行，进行本地调试，最后修改压缩包再重新部署到服务器。殊不知浏览器已经提供了 overrides 功能？
コンソールを開く。
ソースコードを選択し、置き換えをクリックします。
+をクリックしてフォルダを選択（デスクトップ上で任意のファイルを作成できます）
同意を得る。
ページを更新する
选择网络，选择要修改的文件(
css或js)，右键选择：保存并覆盖
- この時点で、リモートファイルがローカルフォルダにダウンロードされていることがわかります。
- コードをファイル内で直接変更すると、ページは同期して変更されます。
変更後はそのまま保存
ローカルファイルをリモートサーバに再デプロイします。
上記は皆さんのための様々なデバッグ機能ですが、皆さんが気に入ってくれることを願っています、私は ** 川の角 ** です。