最近有一些网友提问在Chrome浏览器中如何调试Javascript代码，对于一个经验丰富的前端开发人员来说，这不是一个很难的问题，但对于一个前端开发小白来说，这的确谁是一个很棘手的问题。下面就给大家分享关于Chrome浏览器如何调试Javascript/JS代码的详细操作方法，一起来看看吧！
1、升级Chrome到最新版本
参考下面经验"如何离线安装Chrome最新版本或某一特定版本？"，将Chrome升级到最新版本。
2、Chrome开发者工具常见问题解答
参考下面经验"Chrome开发者工具常见问题解答"，了解Chrome开发者工具常见的问题与解决方法。
3、打开开发者工具
浏览包含要调试的Javascript的页面，按下F12，打开开发者工具。
注：参考下面经验"Chrome浏览器常用键盘快捷键介绍"，就可以了解Chrome常用的快捷键，掌握常用的快捷键，可以有效地提高工作效率。
4、定位到Javascript代码
选择"Sources"选项卡，在Sources面板中选择要调试的文件，在右侧会打开该文件，浏览找到要调试的JavaScript代码。
5、格式化显示JavaScript代码
如果JavaScript代码经过了加密处理，所有的代码都挤在了一行，可以按下格式化按钮，就可以可格式化显示JavaScript代码了。
6、设置调试断点
鼠标点击代码行号，就可以设置断点了。
7、单步运行代码
刷新页面或点击某个按钮，触发执行断点处的代码，代码执行就会在断点处停下来了，按F10就可以单步调试了，如果当前行代调用了某个JavaScript函数，则按F11，就可以调试进入函数内部了，按下F8就可以运行完成就运行到下一个断点处。
8、查看变量的值
鼠标移到变量上面，就会显示变量的内容，右侧调试面板中的Scope中也可以看到局部变量的内容。
9、在Console中显示或改变变量的值
在Console中直接输入变量，或是在Source中选择变量，然后点击右键，在右键菜单中选择"Evaluate in console"，就可以在Console中显示变量的值了。也可以直接在Console中输入变量名=变量值，就可以修改变量的值了。
10、在Watch中监视变量的值
在Source中选择变量，然后点击右键，在右键菜单中选择"Add selected text in watches"，就会将当前选择的文本内容加到Watch中了，这里的内容会随着代码的执行而动态变化。
11、查看代码调用层次关系
Call Stack处会显示当前代码的调用层次关系。
