看见网上很多人问怎么用chrome调试JavaScript代码，我也对这个问题抱着疑问，但是没有找到一篇能用的中文文章（可能我的google有问题），也不知道怎么点出一篇E文的,感觉作者写得不错，所以尽量按照原来的风格弄一篇中文的，希望对和我一样存在疑问的朋友有所帮助。如果高手路过，下面留言指点，或给与相关学习链接，谢谢。
原文地址：http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html
下面我将通过一个例子让大家对chrome的调试功能有个大概的认识。
几个存在的bug：
我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的吧，哈哈）。接下来的步骤将不再由我控制。我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工作量下的情况。
如果你设置了断点后关闭了调试工具，断点任然存在（在测试过程中发现对程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。
（以上问题，作者在MAC本本上调试出的问题，你不一定会碰到，不用在意）。
调试命令：
打开调试窗口后，你可以在底部的输入窗口中输入相关的调试命名，当你输入相关命令敲回车
执行后，调试信息窗口显示的调试命令前会加上$。下面是相关的调试命令，根据调试状态有
两个命令集：runnig，paused。注意：[]是可选项，<>是必选项。
Commands while page is running (no breakpoints hit)
break [condition]
Set a break point where the location is <function> or <script:function> or <script:line> or <script:line:pos>
break_info [breakpoint #]
List the current breakpoints [or the details of the breakpoint that is specified]
clear <breakpoint #>
Remove a specified breakpoint
help [command]
Display the help information for the current status [or the specified command]
print <expression>
Output the expression specified which can be string, object, function, variable, etc.
scripts
List all of the scripts attached to the page.
Commands while page is paused in debugging mode (Break point is hit)
args
Summerize the arguments to the current function. Does not display anything if there are no arguments.
break [condition]
See Running Description
break_info [breakpoint #]
See Running Description
backtrace [<from frame #> <to frame #>]
Look at all the current frames [or look at the frames specified in the range.]* Looks like you need to specify both. Changed notation here compared to the help in the debugger *
clear
See Running Description
continue
Continues the execution of the script.
frame [frame #]
Shows the current frame [or shows the specified frame]
help
See Running Description
locals
Summarize the local variables for current frame. Displays the variables and their values.
next
Moves to the next line in the code. Seems to be like step.
print
See Running Description
scripts
See Running Description
source [from line] | [<from line> <num lines>]
Show the current functions source code [or see a specified line or range of lines]
step
Step through the code line by line when paused in debug mode. * Not sure what is different between step and next *
stepout
* Seems to not work! Should step out of the current debugging step. It should work like continue! *
基础实例：
实例将向你展示如何通过一些基本步骤添加两个断点，查看参数、变量运行时的情况，很简单的。
实例代码：
下面是一个简单的HTML页面以及外部引用的js文件，有两个函数和两个按钮，两个函数分别是两个按钮点击时的处理函数。
HTML页面：
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function hello1(){
var d = new Date();
var str = "Hello World - One./n/nIt is ";
alert( str + d.toString() );
}
</script>
<script type="text/javascript" src="hello2.js"></script>
</head>
<body>
<input type="button" onclick="hello1()" value="Hello 1" />
<input type="button" onclick="hello2('hey hey')" value="Hello 2" />
</body>
</html>
hello2.js：
function hello2( foo ){
var d = new Date();
var str = foo + "/n/nHello World - Two./n/nIt is ";
alert( str + d.toString() );
}
一步步来：
1、保存上面的代码和页面然后在chrome中打开该页面。你可以通过两种方式打开调试窗口，一种是Page Icon --> 开发人员 --> 调试 JavaScript；另一种是通过快捷键Ctrl + Shift + L打开。 调试窗口打开后，你将看见一个很大的带滚动条的信息显示窗和可以输入调试命令的文本框。
2、如果你输入help后回车，将在信息显示窗口中看见你可以输入的调试命令的相关信息。我们从scripts命令该开始。在命令输入框中输入scripts后回车，在信息窗口中你将看见当前页面所引用的js文件，注意，如果你的chrome中有JavaScript console，将会有许多js文件被引入。
3、我们不能像在VS里面那样随意的设置断点，但是我们可以通过另一种方式来设置。在实例代码中有hello1()和hello2()两个函数，要验证函数的存在可以使用print命令。在命名输入框中输入print hello1你将在信息窗口中看见函数对应的代码，当我们确实函数确实存在，我们就可以通过break hello1设置该函数的断点，当函数被调用时会在函数入口处停止下来。hello2的设置方式一样。
4、为了验证断点是否已经设置，我们可以使用break_info命令来查看断点信息。如果仅仅是想了解第几个断点是什么，可以使用断点序列来查看，命令如下：break_info 1，该命令查看第二个断点是什么。
5、当我们设置好断点后，你可以通过点击页面上的按钮来触发断点，如果你单击第一个按钮，hello1函数被调用的时候会停止下来，你可以通过args命令查看当前函数参数的情况，但是hello1没有参数，所以你看不见任何东西，你可以试试点击第二个按钮来获取参数来看看args的效果。此时你可以使用next命令使程序继续往下执行；如果你想查看当前变量的实际情况，可以再命令输入框中输入locals，信息窗口中就会显示当前变量的信息。next使程序执行下一行代码，如果想程序直接继续往下执行直到该停止时停止，输入continue即可。
6、同样在调试过程中，你可以通过print命令输出变量的情况，用step代替next，用stepall代替continue命令执行相关的调试，自己动手试试看看效果有什么不同吧。
7、最后我们希望移除断点，采用什么方法呢？在命令框中输入clear 1，然后再点击第二个按钮试试有什么效果，哇，程序直接执行了并没有在hello2函数出停止下来，hello2的断点消失了。
上面的内容希望对你入门chrome的调试有所帮助，有的地方没有按照E文里面的方式翻译，如果有什么不对的地方，请指正，我们的目标，“共同进步才是真的进步”
原文地址：http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html
下面我将通过一个例子让大家对chrome的调试功能有个大概的认识。
几个存在的bug：
我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的吧，哈哈）。接下来的步骤将不再由我控制。我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工作量下的情况。
如果你设置了断点后关闭了调试工具，断点任然存在（在测试过程中发现对程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。
（以上问题，作者在MAC本本上调试出的问题，你不一定会碰到，不用在意）。
调试命令：
打开调试窗口后，你可以在底部的输入窗口中输入相关的调试命名，当你输入相关命令敲回车
执行后，调试信息窗口显示的调试命令前会加上$。下面是相关的调试命令，根据调试状态有
两个命令集：runnig，paused。注意：[]是可选项，<>是必选项。
Commands while page is running (no breakpoints hit)
break [condition]
Set a break point where the location is <function> or <script:function> or <script:line> or <script:line:pos>
break_info [breakpoint #]
List the current breakpoints [or the details of the breakpoint that is specified]
clear <breakpoint #>
Remove a specified breakpoint
help [command]
Display the help information for the current status [or the specified command]
print <expression>
Output the expression specified which can be string, object, function, variable, etc.
scripts
List all of the scripts attached to the page.
Commands while page is paused in debugging mode (Break point is hit)
args
Summerize the arguments to the current function. Does not display anything if there are no arguments.
break [condition]
See Running Description
break_info [breakpoint #]
See Running Description
backtrace [<from frame #> <to frame #>]
Look at all the current frames [or look at the frames specified in the range.]* Looks like you need to specify both. Changed notation here compared to the help in the debugger *
clear
See Running Description
continue
Continues the execution of the script.
frame [frame #]
Shows the current frame [or shows the specified frame]
help
See Running Description
locals
Summarize the local variables for current frame. Displays the variables and their values.
next
Moves to the next line in the code. Seems to be like step.
print
See Running Description
scripts
See Running Description
source [from line] | [<from line> <num lines>]
Show the current functions source code [or see a specified line or range of lines]
step
Step through the code line by line when paused in debug mode. * Not sure what is different between step and next *
stepout
* Seems to not work! Should step out of the current debugging step. It should work like continue! *
基础实例：
实例将向你展示如何通过一些基本步骤添加两个断点，查看参数、变量运行时的情况，很简单的。
实例代码：
下面是一个简单的HTML页面以及外部引用的js文件，有两个函数和两个按钮，两个函数分别是两个按钮点击时的处理函数。
HTML页面：
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function hello1(){
var d = new Date();
var str = "Hello World - One./n/nIt is ";
alert( str + d.toString() );
}
</script>
<script type="text/javascript" src="hello2.js"></script>
</head>
<body>
<input type="button" onclick="hello1()" value="Hello 1" />
<input type="button" onclick="hello2('hey hey')" value="Hello 2" />
</body>
</html>
hello2.js：
function hello2( foo ){
var d = new Date();
var str = foo + "/n/nHello World - Two./n/nIt is ";
alert( str + d.toString() );
}
一步步来：
1、保存上面的代码和页面然后在chrome中打开该页面。你可以通过两种方式打开调试窗口，一种是Page Icon --> 开发人员 --> 调试 JavaScript；另一种是通过快捷键Ctrl + Shift + L打开。 调试窗口打开后，你将看见一个很大的带滚动条的信息显示窗和可以输入调试命令的文本框。
2、如果你输入help后回车，将在信息显示窗口中看见你可以输入的调试命令的相关信息。我们从scripts命令该开始。在命令输入框中输入scripts后回车，在信息窗口中你将看见当前页面所引用的js文件，注意，如果你的chrome中有JavaScript console，将会有许多js文件被引入。
3、我们不能像在VS里面那样随意的设置断点，但是我们可以通过另一种方式来设置。在实例代码中有hello1()和hello2()两个函数，要验证函数的存在可以使用print命令。在命名输入框中输入print hello1你将在信息窗口中看见函数对应的代码，当我们确实函数确实存在，我们就可以通过break hello1设置该函数的断点，当函数被调用时会在函数入口处停止下来。hello2的设置方式一样。
4、为了验证断点是否已经设置，我们可以使用break_info命令来查看断点信息。如果仅仅是想了解第几个断点是什么，可以使用断点序列来查看，命令如下：break_info 1，该命令查看第二个断点是什么。
5、当我们设置好断点后，你可以通过点击页面上的按钮来触发断点，如果你单击第一个按钮，hello1函数被调用的时候会停止下来，你可以通过args命令查看当前函数参数的情况，但是hello1没有参数，所以你看不见任何东西，你可以试试点击第二个按钮来获取参数来看看args的效果。此时你可以使用next命令使程序继续往下执行；如果你想查看当前变量的实际情况，可以再命令输入框中输入locals，信息窗口中就会显示当前变量的信息。next使程序执行下一行代码，如果想程序直接继续往下执行直到该停止时停止，输入continue即可。
6、同样在调试过程中，你可以通过print命令输出变量的情况，用step代替next，用stepall代替continue命令执行相关的调试，自己动手试试看看效果有什么不同吧。
7、最后我们希望移除断点，采用什么方法呢？在命令框中输入clear 1，然后再点击第二个按钮试试有什么效果，哇，程序直接执行了并没有在hello2函数出停止下来，hello2的断点消失了。
上面的内容希望对你入门chrome的调试有所帮助，有的地方没有按照E文里面的方式翻译，如果有什么不对的地方，请指正，我们的目标，“共同进步才是真的进步”
分享到：
相关推荐
预置Chrome浏览器默认主页和书签方法，文件包含所需的工程文件及配置说明文档 可参考: blog:http://blog.csdn.net/jiulousanti/article/details/38869909
postman4.70 后台api开发神器。get,post,put,delete等调用方式.并支持自动生成代码.postman使用教程:http://blog.csdn.net/qazwsxpcm/article/details/70578600
资源包含文件：lunwen文档+项目源码及数据库文件 编程语言 服务器: Python 2.7 前端: HTML + JavaScript + ...详细介绍参考：https://blog.csdn.net/sheziqiong/article/details/122322080?spm=1001.2014.3001.5502
Node.js 就是运行在服务端的 JavaScript，是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常...
扩展安装页面https://chrome.google.com/extensions/detail/nbokbjkabcmbfdlbddjidfmibcpneigj 特性 - Picasa-like smooth scrolling- Mouse wheel, middle mouse and keyboard support- Arrow keys, PgUp/PgDown...
资源包含文件：课程论文+项目源码及数据库文件+部署文档+项目截图 Eclipse，Eclipse主要用于编写网站代码，通过JDBC等进行数据库的连接，...详细介绍参考：https://biyezuopin.blog.csdn.net/article/details/125384103
chrome 调试插件，支持以下语言 Python - http://github.com/ccampbell/chromelogger-python PHP - http://github.com/ccampbell/chromephp Ruby - https://github.com/cookrn/chrome_logger Node.js ...
使用教程地址：http://blog.csdn.net/flowerspring/article/details/52774399 安装教程地址：http://blog.csdn.net/thebeauty2016/article/details/54348324 一 简介 特点： 创建 + 测试：创建和发送任何的HTTP请求...
硬件环境 一台带 RTX2080ti 显卡的高性能 PC 一台服务器 机器人 软件环境 操作系统：Raspbian（基于 Debian 的 Linux 系统） ...详细介绍参考：https://biyezuopin.blog.csdn.net/article/details/131294335
chrome77浏览器使用之前的包，新上传一个， 插件安装的方式自行搜索。 老版本请移步 https://download.csdn.net/download/king_flag/9782346 如果没有积分，请加群获取，群号：835870546
Chrome x64 离线安装版 2016-12-1 v55.0.2883.87 m 谷歌浏览器Chrome Stable稳定版发布，详细版本号为v55.0.2883.87，上一个正式版发布于11月10日...博客地址：http://blog.csdn.net/ylbf_dev/article/details/51011179
chrome小恐龙游戏图片资源，对应代码在个人csdn博客中。。。。欢迎大家下载 https://blog.csdn.net/qq_42468130/article/details/88960648#comments
Vue.js调试神器，已经编译好，通过谷歌浏览器管理扩展添加，具体添加教程参考https://blog.csdn.net/h2763246823/article/details/117655129
本插件是本人编写的一个谷歌浏览器插件，可在谷歌浏览器内使用（以及使用谷歌浏览器内核，并支持插件的浏览器，如QQ浏览器，360浏览器等）。...本文帖子地址：https://blog.csdn.net/And_ZJ/article/details/90287796
本插件是本人编写的一个谷歌浏览器插件，可在谷歌浏览器内使用（以及使用谷歌浏览器内核，并支持插件的浏览器，如QQ浏览器，360浏览器等）。...本文帖子地址：https://blog.csdn.net/And_ZJ/article/details/90287796
U2FsdGVkX1/okQ0twOeYFz4laV9vlKmrAspHdzdtsjANT/XggYhbq5elBcyC2lMw(密码前三个数字https://www.sojson.com/encrypt_des.html)
本插件是本人编写的一个谷歌浏览器插件，可在谷歌浏览器内使用（以及使用谷歌浏览器内核，并支持插件的浏览器，如QQ浏览器，360浏览器等）。...本文帖子地址：https://blog.csdn.net/And_ZJ/article/details/90287796
Chrome/47.0.2526.106 Safari/537.36 )"} TimeOut=5 root="http://money.163.com/special/002534M5/review.html" Page =requests.session().get(root,headers=head,timeout=TimeOut) Coding= (Page.encoding) ...
在Windows环境下使用nodejs作为服务器，使用https安全协议，能访问到webrtc最新接口； ... 代码中将直播端和显示端分开两个文件，可以使用手机或...功能说明：http://blog.csdn.net/qq983392709/article/details/78749730
Google Chrome插件: Dream After New Tab . 为chrome添加新标签页新样式, 并可以替代默认的chrome://newtab 离线插件使用方法: 1. 地址栏键入chrome://extensions/ 或者 自定义及控制按钮(右上角) -> 更多工具 -> ...