`
zhaoshg
  • 浏览: 253065 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Chrome的命令行调试工具-Javascript Debugger

    博客分类:
  • Web
阅读更多

原文http://d.hatena.ne.jp/Syunpei/20080904/1220500815
这篇文章介绍的很清楚了。喜欢用命令行的爱用这个,挺有意思的

别名
命令
b	break
bi	break_info
br 
break
bt 
backtrace
c	continue
f	frame
h	help
?	help
s	source
n	next
p	print
s	step
so	stepout

我译了一下他的演示过程:

JavaScript Debugger
attached to a. html
$ b reverseDisplay <---------- reverseDisplay方法设置断点
set breakpoint # 2
$ bt <---------- back trace显示(onclick → reverseDisplay了解被执行的情况)
Frames # 0 to # 1 of 2:
# 00 reverseDisplay () file:///C:/Documents and Settings/Administrator/desktop/a.html line 5 column 2(position 31)
# 01 #<an HTMLButtonElement>.Onclick(evt = #)file:///C:/Documents and Settings/Administrator/desktop/a.html line 17 column 9 (position 143)
$ bi 2 <------ 显示断点2的信息
id=2, hit_count=0, type=function, target=reverseDisplay
paused at breakpoint 2: reverseDisplay(), file:///C:/Documents and Settings/Administrator/Desktop/a.html
5: var input=document.getElementById( "input").value;
$ ls <---------- 显看源代码
3:
4: function reverseDisplay () (
>>>> var input = document.getElementById ( "input"). value;
6: var out = "";
7: for (var i = input.length - 1; i> = 0; i -) (
8: out + = input . charAt (i);
9: )
10: output (out);
11:)
$ n <---------- 前进1行
7: for (var i = input.length - 1; i> = 0; i -) (
$ p input <---------- 显示变量input的值
$ b :10 <---------- 设第10行为断点(#3).
set breakpoint #3
$ bi <---------- 显示全部断点信息
Num breakpoints: 2
id=2, hit_count=1, type=function, target=reverseDisplay
id=3, hit_count=0, type=script, target=file:///C:/Documents and Settings/Administrator/デスクトップ/a.html, line=9
$ c <---------- 继续执行到第10行
paused at breakpoint 3: reverseDisplay(), file:///C:/Documents and Settings/Administrator/デスクトップ/a.html
10: output(out);
$ s <---------- 步进到output方法
output(out=おえういあ), file:///C:/Documents and Settings/Administrator/デスクトップ/a.html
13: document.getElementById("output").textContent = out;
$ args <---------- 查看方法的参数
out = "おえういあ"
$ frame <----------查看当前的frame(output方法)
#0 output, file:///C:/Documents and Settings/Administrator/デスクトップ/a.html
13: document.getElementById("output").textContent = out;
$ frame 1 <----------查看frame1(reverseDisplay方法)
#1 reverseDisplay, file:///C:/Documents and Settings/Administrator/デスクトップ/a.html
10: output(out);
$ frame 2 <----------查看frame2(onclick方法)
#2 onclick, file:///C:/Documents and Settings/Administrator/デスクトップ/a.html
17: reverseDisplay();
$ bt 1 2 <----------反向跟踪frame 1~2
Frames #1 to #2 of 3:
#01 reverseDisplay() file:///C:/Documents and Settings/Administrator/デスクトップ/a.html line 10 column 2 (position 175)
#02 #<an HTMLButtonElement>.onclick(evt=# ) file:///C:/Documents and Settings/Administrator/デスクトップ/a.html line 17 column 9 (position 143)
$ so <---------- 步出output方法
reverseDisplay(), file:///C:/Documents and Settings/Administrator/デスクトップ/a.html
11: }
$ locals <---------- 查看本地变量
input = "あいうえお"
out = "おえういあ"
i = -1
$ c <---------- 继续执行、结束
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics