`
zhaoshg
  • 浏览: 258164 次
  • 性别: 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 <---------- 继续执行、结束
分享到:
评论

相关推荐

    React Native Debugger reactnative可视化调试工具

    在实际使用中,React Native Debugger通常与`react-native-debugger-open`命令行工具结合,以便在启动应用时自动打开调试器。此外,还可以通过`react-native log-ios`或`react-native log-android`命令来收集应用的...

    chrome_debugger:用于 Emacs 的 Chrome Javascript 调试器

    支持来自 chrome 开发人员工具的所有已知调试器功能,如步进、显示堆栈、重新启动帧、对象评估、文件重新编译、Web 工作者调试。 Chrome 需要使用以下命令行参数启动,以便打开调试端口: chrome --remote-...

    Node.js-inspect-process使用chrome-devtools用于Node.js简单调试的工具

    `inspect-process`是一个实用的工具,它允许开发者利用Chrome DevTools来对Node.js应用进行简单的调试。这个工具充分利用了Chrome的强大调试功能,为Node.js开发者提供了一种直观且高效的调试环境。 Chrome ...

    javascript调试工具

    二、命令行调试工具 1. Node.js Debugger:Node.js环境下的调试工具,通过`--inspect`参数启动服务,配合Chrome DevTools进行远程调试。 2. VS Code Debugger:Visual Studio Code编辑器内置的调试器,支持多种...

    javascript 调试工具

    1. Chrome DevTools:Chrome浏览器内置的强大开发者工具,提供了Sources面板用于调试JavaScript。你可以设置断点,单步执行代码,查看变量值,甚至修改运行时的代码。此外,Console面板可以实时查看日志输出,方便...

    Python-通过Chrome开发者工具调试Django应用

    而Chrome开发者工具(Chrome DevTools)是前端开发者必备的利器,它可以帮助我们调试JavaScript、CSS、网络请求等。然而,很多人可能不知道,Chrome DevTools也可以与Django结合,用于调试后端应用。下面我们将深入...

    javascript_debugger

    JavaScript调试器通常内置于浏览器的开发者工具中,如Chrome DevTools、Firefox Developer Tools等,同时也存在于独立的IDE(集成开发环境)和代码编辑器中,例如Visual Studio Code、WebStorm等。 标题"javascript...

    vscode-chrome-debug:从VS Code调试在Google Chrome中运行JavaScript代码

    VS Code扩展程序,用于在Google Chrome浏览器或其他支持目标中调试JavaScript代码。 支持的功能 设置断点,包括在启用源映射时在源文件中的断点 步进,包括Chrome页面上的按钮 “本地”窗格 调试eval脚本,脚本...

    基于VSCode调试网页JavaScript代码过程详解

    总结来说,VSCode与“Debugger for Chrome”插件的结合,提供了一套强大且直观的调试工具,使得调试JavaScript代码变得轻松而高效。无论你是开发复杂的Web应用还是简单的网页项目,了解和掌握这一调试流程都能显著...

    10个基于浏览器的JavaScript调试工具分享

    JS Bin类似于jsfiddle,支持在线分享和协作调试JavaScript和CSS代码。它提供了一个独立的环境,无需考虑上下文,使开发者能轻松编辑和测试代码。 4. Blackbird JavaScript Debug Helper Blackbird提供了一个美化过...

    tornado调试技巧

    浏览器也是调试Tornado应用的一个重要工具,特别是对于前端部分的JavaScript代码。开发者可以利用浏览器的开发者工具(如Chrome的DevTools或Firefox的Developer Edition)进行断点设置、网络请求检查、性能分析等。...

    【JavaScript源代码】React Native 脚手架的基本使用详解.docx

    2. **Debug JS Remotely**:此功能允许在Chrome浏览器中远程调试JavaScript代码,调试方式与Web应用相同。 3. **Change Bundle Location**:改变打包后的资源地址。 4. **Toggle Inspector**:检查模拟器中的组件...

    Node.js-ndb是针对Node.js的改进调试体验由ChromeDevTools支持

    而`ndb`(Node.js Debugger)是Google Chrome DevTools团队为Node.js推出的一个增强版调试工具,旨在提供更高效、更强大的调试体验。在深入探讨`ndb`之前,我们先来了解一下Node.js的常规调试方式。 在没有`ndb`时...

    Linux、Mac、Windows、Android、IOS等操作系统开发/调试的案例&项目

    - **调试工具**: 除了Xcode内置的调试器外,还可以使用LLDB命令行调试器进行深入调试,而Instruments则可用于性能监控。 #### 跨平台开发 - **开发环境**: 使用React Native、Flutter或Xamarin等框架可实现一次编写...

    node-inspect:节点--inspect的节点调试

    但是对于Chrome检查器协议,只有一个: node --inspect &lt;file&gt; 。 该项目试图通过针对新协议重新实现node debug来提供缺少的第二个选项。 Usage: node-inspect script.js node-inspect &lt;host&gt;: node-inspect -...

    如何通过vscode运行调试javascript代码

    本篇文章将详细介绍如何在VSCode中运行和调试JavaScript代码,分为两种方法:直接在JS文件中编写代码以及在HTML文件中嵌入JavaScript代码。 **方法一:在JS文件中编写JavaScript代码** 1. **环境配置**: - 首先...

    debug资料.rar debug资料.rar debug资料.rar

    - **命令行调试器**:如GDB(GNU调试器)适用于C/C++等语言。 - **浏览器开发者工具**:对于Web应用,Chrome DevTools和Firefox Developer Tools提供了强大的前端调试功能。 - **第三方调试库**:如Python的pdb...

    使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏的例子.zip

    "LayaAir IDE"扩展提供代码提示、语法高亮和编译功能,"AS3 & MXML"扩展则用于ActionScript的语法支持,而"Debugger for Chrome"扩展允许我们在Chrome浏览器中直接调试我们的游戏。 在“LayaAir-ActionScript-Debug...

    node.js的windows下的安装包:node-v18.19.0-x64windows安装包

    - 调试工具如 Node.js 的内置 debugger 或 VSCode 的 Node.js 调试支持,帮助开发者高效地定位和解决问题。 6. **学习资源**: - 官方文档:Node.js 的官方文档详尽且更新及时,是学习 Node.js 的重要参考。 - ...

    node 安装开发工具

    - **Debugger for Chrome**:VS Code 中的 Chrome 调试工具。 5. **版本管理器**:如果你需要在不同项目间切换 Node.js 版本,可以使用 nvm(Node Version Manager)(macOS/Linux)或 nvm-windows(Windows)。...

Global site tag (gtag.js) - Google Analytics