JS使⽤Chrome浏览器实现调试线上代码
前⾔
  之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境，验收合格之后发布⽣产。但⽣产环境偏偏会有和开发和测试环境不⼀致的情况，例如测试环境需要加密，⽽开发环境先不加密，测试环境传给我们的时间格式和⽣产环境时间格式不⼀致，数组对象不⼀致等导致线上⽣产报错的bug。
  为了更好的在线上环境检测到具体的bug，节省我们在本地把地址改为⽣产的地址并⾛多⼀遍流程测试的⿇烦，Chrome浏览器dbug测试就显得尤为重要了。
⼀、定位js代码并标记dbug
  ⾸先F12打开控制台，然后选择"Sources"选项卡，在Sources⾯板中选择要调试的⽂件，在右侧会打开该⽂件，浏览到要调试的JavaScript代码，点击代码⾏号，设置dbug；
  像上⾯的两个console，第⼀个打印的是'aaa'，第⼆个打印的是'bbb'，此时在第⼆个console左侧点击⼀下，就会出现dbug的红点，刷新⽹页时，运⾏到第⼆个console就会停⽌，也就是只会打印aaa。
chrome浏览器是什么浏览器图标⼆、格式化显⽰的JS代码
  现在很多公司都要求前端代码打包并加密，因此我们看到的代码可能⼏乎没有可读性可⾔，此时我们
只需要点击下⾯的格式化按钮，浏览器就会⾃动帮我们整理好代码的格式，真⼼⼤爱Chrome。
三、跳转到下⼀个dbug/单步运⾏/步⼊⾏数内部
  我们的程序⼤多数情况不可能只定位⼀个dbug，但定位太多个⼜会导致控制台显得很乱，并且⽆法直接在函数内部定位。
  但幸运的是Chrome都有快捷键帮助我们解决上述问题。
  按下F8就可以运⾏完成就运⾏到下⼀个断点处，按F10就可以单步调试，就是指代码运⾏到下⼀⾏⽽不是下⼀个断点，按F11再点击代码的⾏号就可以在⽅法体的函数内部标记dbug。
四、查看变量的值
  ⿏标移到变量上⾯，就会显⽰变量的内容，右侧调试⾯板中的Scope中也可以看到局部变量的内容。
  注意，如果在赋值前dbug没有运⾏到这个位置，那么显⽰的变量值为undefined。
五、利⽤Watch监视变量的值
  在Source中选择变量，然后点击右键，在右键菜单中选择"Add selected text in watches"，就会将当前选择的⽂本内容加到Watch中了，这⾥的内容会随着代码的执⾏⽽动态变化。
六、利⽤Call Stack查看代码的层次关系以及Breakpoints查看所有断点
  也是在Sources页下⽅就可以看到。
七、最重要的⼀点--在Console中显⽰和改变变量值
  在Console中直接输⼊变量，或是在Source中选择变量，然后点击右键，在右键菜单中选择"Evaluate in console"，就可以在Console中显⽰变量的值了。也可以直接在Console中输⼊变量名=变量值，就可以修改变量的值了，相当于我们⽆需借助编辑器就可以调试线上的数据，⽽⼀旦报错浏览器也会定位到错误的⾏，可以说⾮常赞了。
  这种⽅式可以在变量赋新值之前配合dbug使⽤，或者直接console出该变量的值，来确定是否和其他环境的值⼀样被⾃⼰解密或转变格式。
总结
  以上⽅式⾜够在线上环境出⼤多数bug，最后在本地把接⼝地址换成开发环境的地址，代码改完后⽣产环境测试⼀遍，基本⼀步到位。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。