如何通过Chrome浏览器调试线上JavaScript代码？

本文共计1065个文字，预计阅读时间需要5分钟。

前言+之前调试前端bug都是在开发环境中完成，并多次测试没有问题后发布测试环境，验收合格后发布生产。但生产环境偶尔会有和开发、测试环境不一致的情况，例如测试环境需要加‘。

前言

　　之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境，验收合格之后发布生产。但生产环境偏偏会有和开发和测试环境不一致的情况，例如测试环境需要加密，而开发环境先不加密，测试环境传给我们的时间格式和生产环境时间格式不一致，数组对象不一致等导致线上生产报错的bug。

　　为了更好的在线上环境检测到具体的bug，节省我们在本地把地址改为生产的地址并走多一遍流程测试的麻烦，Chrome浏览器dbug测试就显得尤为重要了。

一、定位js代码并标记dbug

　　首先F12打开控制台，然后选择"Sources"选项卡，在Sources面板中选择要调试的文件，在右侧会打开该文件，浏览找到要调试的JavaScript代码，点击代码行号，设置dbug；

　　像上面的两个console,第一个打印的是'aaa'，第二个打印的是'bbb'，此时在第二个console左侧点击一下，就会出现dbug的红点，刷新网页时，运行到第二个console就会停止，也就是只会打印aaa。

二、格式化显示的JS代码

　　现在很多公司都要求前端代码打包并加密，因此我们看到的代码可能几乎没有可读性可言，此时我们只需要点击下面的格式化按钮，浏览器就会自动帮我们整理好代码的格式，真心大爱Chrome。