Javascript使用Google Chrome逐行debugging
我怎样才能通过我的JavaScript代码逐行使用谷歌的Chromes开发人员的工具,而不会进入JavaScript库?
例如,我在我的网站上大量使用jQuery,我只想debugging我写的jQuery,而不是jquery库中的javascript / jquery。 我如何只通过我自己的jQuery / JavaScript,而不必步骤通过jQuery库中的数百万行?
所以,如果我有以下几点:
function getTabFrame() { $.ajax({ url: 'get_tab_frame.aspx?rand=' + Math.random(), type: 'GET', dataType: 'json', error: function(xhr, status, error) { //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText); }, success: function(data) { $.each(data, function(index, item) { // do something here }); } }); }
如果我把断点放在$.ajax({
,如果我开始debugging,它停在哪里,如果我然后按F11,它直接进入jQuery库,我不希望这种情况发生,我希望它转到下一行,即url: 'get_tab_frame.aspx?rand=' + Math.random(),
我已经尝试按F10,而是直接到函数的closures}
。 而F5只是走到下一个断点,没有逐一逐行地通过每一行。
假设你正在Windows机器上运行…
- 按
F12
键 - select开发人员工具中的“
Scripts
”或“Sources
”选项卡 - 点击顶层的小文件夹图标
- select你的 JavaScript文件
- 通过点击左边的行号添加一个断点(添加一个蓝色的标记)
- 执行你的JavaScript
然后在执行debugging过程中,您可以执行一些步进运动…
-
F8
继续:将继续,直到下一个断点 -
F10
跳过:下一个函数调用的步骤( 不会进入库) -
F11
进入:进入下一个函数调用的步骤( 将进入库) -
Shift + F11
步出:跳出当前function
更新
阅读更新后的post; debugging你的代码,我会build议暂时使用jQuery开发源代码 。 虽然这不能直接解决你的问题,但它会让你更容易debugging。 对于你想达到的目标,我相信你需要进入图书馆,所以希望生产代码能够帮助你破译发生的事情。
我怎样才能通过我的JavaScript代码逐行使用Google Chromes开发人员工具,而不会进入JavaScript库?
logging:在这个时候(2015年2月),Google Chrome浏览器和Firefox都有你(我)需要避免进入库和脚本的内容,超越了我们感兴趣的代码,这就是所谓的黑盒子:
当你对源文件进行黑盒操作时,在逐步debugging你正在debugging的代码时,debugging器不会跳转到该文件中。
更多信息:
- Chrome: Blackbox JavaScript源文件
- Firefox: debugging器中的黑盒子库