① 自动打断点（抛异常时自动断点）

偶然一次可能不小心打开某个设置选项，可能设置了英文又不知道是打开了什么，只知道当每次打开F11打开控制台调试看数据的时候，就是不会自动停在某个位置，又不知道怎么停掉，怀疑会不会是安装了什么谷歌插件或者是油猴哪个脚本代码写错写了什么。

不小心打钩了断点调试的遇到未捕获的异常时暂停，或者在遇到异常时暂停这两个选项其中一个。就有可能导致了谷歌的调试器暂停，取决于这个网站有没有一些异常触发到这一点，勾选上每次异常浏览器会帮我们打断点。

所以解决办法就是把谷歌浏览器中的这两个勾去掉，如果不是你本意打开想要调试网站中一些异常的报错。

② 一键重发请求（不用每次重新请求就刷新页面）

排查接口的时候，需要重新请求该接口，不必要每次重新刷新页面去请求试接口里面传参对不对返回来的数据对不对。重发请求很简单，右击该接口重发xhr即可。

③ 断点调试+debugger+console+try...catch

(1) console.log

找bug解决bug是很重要滴。console.log-输出某个变量值是非常非常常用的，只要做码农一定得会各种语言的输出消息和变量的语句，方便我们查看和调试。

(2) debugger（不用每次都console）

在代码某个语句后面或者前面输debugger

在我入行到在学校生涯那段时间都不知道debugger;这玩意，有一次项目有一个比较棘手不知道怎么解决的问题，甲方公司项目负责人开会重点讲了那个问题，就见他这里输一下dubugger，那里输一个debugger，当时就觉得那玩意很神（反正意识上只要我们不懂的东西刚开始接触都是这样，这里神那里神的，接触久了就觉的也就那样不过如此，很平常），最后也没看出什么来。

debugger就是在某个状态下，用这个debugger;语句在那里断一下点，然后当下，上下文的状态和值都可以在查看，哪个分支导致变量状态错误。

使用debugger可以查看:

• 
  
• 作用域变量
  
• 函数参数
  
• 函数调用堆栈
  
• 代码整个执行过程（从哪一句到哪一句的）
  
• 如果是异步promise async...await 等这种的话就需要在then和catch里面debugger去调试
  

(3) try...catch 捕获异常

try {
// 可能会抛出异常的代码

} catch {
// 处理所有异常的代码

}

用try...catch捕获异常，包括运行时错误和自定义以及语法错误。

在try...catch中还可以在某些情况下用throw在代码中主动抛出异常。

try {
// 可能会抛出异常的代码

if (某某情况下) throw '某某错误提示信息'


} catch {
// 处理所有异常的代码

} finally {
// 结束处理用于清理操作

}

④ 联调查看接口数据

如上图这个接口，如果想要复制接口preview里面的数据，

除了去Responese里面去找我们需要的某个值去选择复制之外（这个有个缺点就是要找值不直观），还可以右击某个值，然后通过点击store object as global variable(存储为全局变量) 获取。

当我们点击了之后，控制台就会出现tempXX这个变量。

我们就只需要在控制台输入copy(temp3)copy(要复制的json名)，在粘贴板上就有这个json数据了。

💡
全局方法copy()在console里copy任何你能拿到的数据资源。

⑤ 后端接口数据返回json

这个有时候有的同学有可能碰到类似这种的JSON数据{\"name\":\"John\",\"address\":\"123 Main St, City\"}

解决方法

直接打开控制台console，输入 JSON.parse("{"name":"John","address":"123 Main St, City"}")，这样

如果你想复制下来用，直接跟上面我们用copy这好碰上，赋值加上一个copy就可以了。

这样这个值就在粘贴板上了。

总结

报错和bug，多多少少会贯穿我们的职业生涯中，如何定位问题、解决问题，加以调试，是我们必须也是不能不必备的技能。

☎️ 希望对大家有所帮助，如有错误，望不吝赐教，欢迎评论区留言互相学习。