原文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 <---------- 继续执行、结束
分享到:
相关推荐
在实际使用中,React Native Debugger通常与`react-native-debugger-open`命令行工具结合,以便在启动应用时自动打开调试器。此外,还可以通过`react-native log-ios`或`react-native log-android`命令来收集应用的...
支持来自 chrome 开发人员工具的所有已知调试器功能,如步进、显示堆栈、重新启动帧、对象评估、文件重新编译、Web 工作者调试。 Chrome 需要使用以下命令行参数启动,以便打开调试端口: chrome --remote-...
`inspect-process`是一个实用的工具,它允许开发者利用Chrome DevTools来对Node.js应用进行简单的调试。这个工具充分利用了Chrome的强大调试功能,为Node.js开发者提供了一种直观且高效的调试环境。 Chrome ...
二、命令行调试工具 1. Node.js Debugger:Node.js环境下的调试工具,通过`--inspect`参数启动服务,配合Chrome DevTools进行远程调试。 2. VS Code Debugger:Visual Studio Code编辑器内置的调试器,支持多种...
1. Chrome DevTools:Chrome浏览器内置的强大开发者工具,提供了Sources面板用于调试JavaScript。你可以设置断点,单步执行代码,查看变量值,甚至修改运行时的代码。此外,Console面板可以实时查看日志输出,方便...
而Chrome开发者工具(Chrome DevTools)是前端开发者必备的利器,它可以帮助我们调试JavaScript、CSS、网络请求等。然而,很多人可能不知道,Chrome DevTools也可以与Django结合,用于调试后端应用。下面我们将深入...
JavaScript调试器通常内置于浏览器的开发者工具中,如Chrome DevTools、Firefox Developer Tools等,同时也存在于独立的IDE(集成开发环境)和代码编辑器中,例如Visual Studio Code、WebStorm等。 标题"javascript...
VS Code扩展程序,用于在Google Chrome浏览器或其他支持目标中调试JavaScript代码。 支持的功能 设置断点,包括在启用源映射时在源文件中的断点 步进,包括Chrome页面上的按钮 “本地”窗格 调试eval脚本,脚本...
总结来说,VSCode与“Debugger for Chrome”插件的结合,提供了一套强大且直观的调试工具,使得调试JavaScript代码变得轻松而高效。无论你是开发复杂的Web应用还是简单的网页项目,了解和掌握这一调试流程都能显著...
JS Bin类似于jsfiddle,支持在线分享和协作调试JavaScript和CSS代码。它提供了一个独立的环境,无需考虑上下文,使开发者能轻松编辑和测试代码。 4. Blackbird JavaScript Debug Helper Blackbird提供了一个美化过...
浏览器也是调试Tornado应用的一个重要工具,特别是对于前端部分的JavaScript代码。开发者可以利用浏览器的开发者工具(如Chrome的DevTools或Firefox的Developer Edition)进行断点设置、网络请求检查、性能分析等。...
2. **Debug JS Remotely**:此功能允许在Chrome浏览器中远程调试JavaScript代码,调试方式与Web应用相同。 3. **Change Bundle Location**:改变打包后的资源地址。 4. **Toggle Inspector**:检查模拟器中的组件...
而`ndb`(Node.js Debugger)是Google Chrome DevTools团队为Node.js推出的一个增强版调试工具,旨在提供更高效、更强大的调试体验。在深入探讨`ndb`之前,我们先来了解一下Node.js的常规调试方式。 在没有`ndb`时...
- **调试工具**: 除了Xcode内置的调试器外,还可以使用LLDB命令行调试器进行深入调试,而Instruments则可用于性能监控。 #### 跨平台开发 - **开发环境**: 使用React Native、Flutter或Xamarin等框架可实现一次编写...
但是对于Chrome检查器协议,只有一个: node --inspect <file> 。 该项目试图通过针对新协议重新实现node debug来提供缺少的第二个选项。 Usage: node-inspect script.js node-inspect <host>: node-inspect -...
本篇文章将详细介绍如何在VSCode中运行和调试JavaScript代码,分为两种方法:直接在JS文件中编写代码以及在HTML文件中嵌入JavaScript代码。 **方法一:在JS文件中编写JavaScript代码** 1. **环境配置**: - 首先...
- **命令行调试器**:如GDB(GNU调试器)适用于C/C++等语言。 - **浏览器开发者工具**:对于Web应用,Chrome DevTools和Firefox Developer Tools提供了强大的前端调试功能。 - **第三方调试库**:如Python的pdb...
"LayaAir IDE"扩展提供代码提示、语法高亮和编译功能,"AS3 & MXML"扩展则用于ActionScript的语法支持,而"Debugger for Chrome"扩展允许我们在Chrome浏览器中直接调试我们的游戏。 在“LayaAir-ActionScript-Debug...
- 调试工具如 Node.js 的内置 debugger 或 VSCode 的 Node.js 调试支持,帮助开发者高效地定位和解决问题。 6. **学习资源**: - 官方文档:Node.js 的官方文档详尽且更新及时,是学习 Node.js 的重要参考。 - ...
- **Debugger for Chrome**:VS Code 中的 Chrome 调试工具。 5. **版本管理器**:如果你需要在不同项目间切换 Node.js 版本,可以使用 nvm(Node Version Manager)(macOS/Linux)或 nvm-windows(Windows)。...