debugger在浏览器中的基本使用

调试代码：在开发者工具的 “Sources” 或 “调试” 面板中，找到你的源代码文件（通常在 “localhost” 或 “webpack” 目录下），然后找到你添加了 debugger 的代码行。查看变量和调试信息：在开发者工具的 “Sources” 或 “调试” 面板中，你可以查看和检查代码中的变量值、调用栈和其他调试信息。然后，可以使用调试工具栏中的按钮（如 “继续”、“单步执行”、“跳过”）来逐行执行代码，并观察变量的值和调试信息。触发断点：在浏览器中执行触发该断点的操作。

F12 设置 忽略列表 取消忽略。

可以在代码里面写一句debugger，一旦运行到debugger就会自动卡在那里进入调试模式，使用这个有两个好处，一个是不用手动去展开文件找到对应的位置，因 为现在很多人都用第三方的打包工具，导致运行的代码和本地的代码行数不能保持一致，所以需要去搜索相应的代码，比较麻烦。另外一个好处是：当代码是一个 很大的循环的时候，并且在特定的情况下代码会出错，由于要循环好多次，所以有时候不可能在循环里面打个断点，然后不断地跳到下一个断点直到出现问题。所 以这时候怎么办呢？可以用条件结合debugger。

快捷键大全 快捷键有这么以下几大类..且看我一一道来~~~注:All pane是全局快捷键 Console() Ctrl + L : 清除控制台消息 Tab : 自动完成通用常缀 →: 接受建议 Ctrl  +  U: 清除console的提示!!(实操查看源代码!!) ↓ / ↑ :选中下一行/上一行 Enter: 执行代码或者命令 Debugger(调试面板) F8  or

前端调试是指在开发过程中，通过检测和修复前端代码中的错误和问题，以确保网页或应用程序在各种设备和浏览器中正常运行的过程。它是前端开发过程中不可或缺的一部分，可以帮助开发人员快速定位并解决潜在的问题，提高代码的质量和用户体验。

debugger 是JavaScript中定义的一个专门用于断点调试的关键字，只要遇到它，JavaScript的执行便会在此处中断，进入一种调试模式。有了 debugger 这个关键字，该 debugger 会被网站开发者利用，使其成为我们正常调试的拦截手段。

快捷键有这么以下几大类..且看我一一道来~~~注:All pane是全局快捷键 Console() Ctrl+L: 清除控制台消息Tab: 自动完成通用常缀→: 接受建议Ctrl + U: 清除console的提示!!(实操查看源代码!!)↓/↑:选中下一行/上一行Enter: 执行代码或者命令 Debugger(调试面板) F8 orCtrl

按下ctrl+shift+p键，打开命令，输入主题(英文版本输入theme）就可以改变调试模式的背景，输入截（英文版本输入screen）就可以打开截图，截图可分为全尺寸(整个页面含有滚动条)、区域（类似QQ截图),屏幕截图(当前展示的屏幕截图）以及节点截图(选中HTML中的某个元素，点击截图可截取当前节点所在的区别)点击 [Select folder for overrides]，会弹出资源选择器，这里选择一个要存放覆盖代码的文件夹，如果没有合适的，可以新建一个，我这里是新建的 debug，然后选中。

一、Debug视图 调试中最常用的窗口是: 窗口 说明 Debug窗口 主要显示当前线程方法调用栈， 以及代码行数(有调试信息的代码) 断点Breakpoints窗口 => 断点列表窗口，可以方便增加断点，设置断点条件，删除断点等 变量Variables窗口 => 显示当前方法的本

最基本的操作是： 1.首先在一个java文件中设断点，然后debug as－－>open debug Dialog，然后在对话框中选类后－－> Run 当程序走到断点处就会转到debug视图下。 2.F5键与F6键均为单步调试，F5是step into,也就是进入本行代码中执行，F6是step over， 也就是执行本行代码，跳到下一行， 3.F7是跳出函

一、打开和进入调试 ①打开debugger调试 无论是web网页（F12）还是微信开发者工具里面，调试都是在source面板 ②在需要打断点的地方打上标签，如图 39 、47 ③F5刷新，重新执行，进入断点。如果没有进入断点，说明这个断点不是运行时触发或者需要点击等其他事件触发。 二、调试工具说明 ①进入下个断点 ，快捷键F8，如果有多个断点，点击时可以直接进入下个断点，忽略断点内部所有逻辑。 ②忽略代码内部实现，进入下个方法 ，快捷键 F10，不关注方法内部逻辑，点击直接跳到当前断点的下个方法 ③

调试工具的面板有很多，先掌握做常用的4个元素(Element)控制台（Console）源代码（Sources）网络（Network）掌握Chrome调试工具的基本使用认识常见报错的种类能够在报错中提取关键信息能够通过调试工具、二分注释排除法，准确定位代码Bug位置。

Ctrl + Shift +J 直接进入console面板

文件保存到本地修改，修改范围主要是将debugger相关的代码删除或者改写，可以使用文件替换、抓包工具拦截方式。这个函数造成的,所以我们可以重写这个函数,使无限debugger失效.在控制台中输入。有些debugger前会有逻辑判断， 符合条件的时候才会去debugger,站点：https://bz.zzzmh.cn/index。断点设置在 条件判断这一行，可以用控制台的功能给他改成。无限debugger产生的原因是第七行代码。注：一定要在debugger进入之前。

谷歌开发者工具是前端日常不可缺少的神奇，写布局，找 bug，优化加载速度统统靠他。但是你真的了解他么？这篇文章是专门介绍谷歌浏览器各种好用小技巧的。不是什么长篇大论，旨在提高你的开发效率，早日完工回家陪女朋友。应该了解的快捷键放大内容 CTRL + +缩小内容 CTRL + -回到正常大小 CTRL + 0标签页切换 CTRL + 1~9 (1~9 分别代表第一个标签，第二个标签...)打开新的标...

指程序发生了错误。