chrome浏览器调试JS代码
是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题。不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了。本文主要介绍其中的 JavaScript 断点设置 和 调试 功能,也就是其中的 Sources Panel(以前叫 Scripts)。如果你精通 Eclipse 中的各种 Java 调试技巧,那么这里的概念都是类似。写作本文时使用的 Chrome 版本为 25.0.1364.172。
最上面是 f(),然后是 g()。调用栈中的每一层叫做一个 frame,点击每个 frame 可以跳到该 frame 的调用点上。
Call Stack 列表的下方是 Scope Variables 列表,在这里可以查看此时局部变量和全局变量的值。
在断点调试时,可以用鼠标选择想要查看的变量或表达式,然后右键菜单执行“Evaluate in Console”,就可以看到该表达式的当前的值了。
- 默认遇到异常不中断
- 遇到所有异常都会中断,包括已捕获的情况
- 仅在出现未捕获的异常时才中断
try{ throw 'a exception'; }catch(e){ console.log(e); }
上面 try 里面的代码会遇到异常,但是后面的 catch 代码能够捕获该异常。如果是所有异常都中断,那么代码执行到会产生异常的 throw 语句时就会自动中断;而如果是仅遇到未捕获异常才中断,那么这里就不会中断。一般我们会更关心遇到未捕获异常的情况。
在 DOM 元素上设置断点
如图所见,在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点:
- 子节点修改
- 自身属性修改
- 自身节点被删除
所有开发工具中的快捷键都可以在界面右下角的设置中查到。断点调试时一般用的是 F8、F10、F11或 Shitf+F11,但在 Mac OS 上 F10 等功能键可能与系统默认的快捷键冲突。没关系,它们分别可以用 Cmd+/ 、Cmd+'、Cmd+; 、Shift+Cmd+; 代替。
var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!"); eval(coffee);
美化前
美化后
chrome浏览器调试JS代码相关推荐
- Chrome浏览器调试js第二次运行出现Uncaught SyntaxError: Identifier ‘***’ has already been declared
问题描述 Chrome浏览器调试js第二次运行出现Uncaught SyntaxError: Identifier '***' has already been declared 原因 let 语句只 ...
- debug idea js_IntelliJ IDEA 配置chrome插件调试js代码 - 狂奔的熊二 - 博客园
调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化.偶然发现idea竟然有这个功能,简直神器啊.研究了半天终于搞定了,哈哈,开心.下面是 ...
- IntelliJ IDEA 配置chrome插件调试js代码
调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化.偶然发现idea竟然有这个功能,简直神器啊.研究了半天终于搞定了,哈哈,开心.下面是 ...
- 如何用浏览器调试js代码,不如先看看如何爬取百度翻译(多图警告)
爬取百度翻译 爬取网站四部曲 分析 langdetect v2transapi?from=zh&to=en 分析重点请求出现的问题 解决问题 js代码调试 代码实现 注意 爬取网站四部曲 分析 ...
- chrome浏览器断点调试js代码 和 idea断点调试java代码
文章目录 chrome调试js代码 idea调试java代码 chrome调试js代码 Chrome调试快捷键总结 快捷键 功能 F10 (step over) 单步调试.步过,遇到函数时也当成一个语 ...
- Chrome谷歌浏览器在DevTools中调试JS代码格式化
大家在Chrome浏览器中调试JS代码时经常看到的是被压缩后的JS代码,可读性很差,在DevTools中js页面最下面有个格式化的图标**{}**,如下图所示: 点击格式化后会打开新的视图,新js名称 ...
- Chrome - JavaScript调试技巧总结(浏览器调试JS)
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
- 工具推荐|使用Edge浏览器来调试js代码
一直习惯使用了 使用谷歌浏览器做js的逆向分析,其强大的搜索功能及插件扩展让我对其爱不释手,但其有个不支持的功能让我特别的痛苦,有时候无法分析下一步,比如访问如下网站: https://www.e-f ...
- 如何在浏览器中调试JS代码,debug
如何在浏览器中调试JS代码,debug 首先需要一段js代码,我将它放进html文件里面: 创建一个html文件,<script>标签里面放入需要调试的js代码,html文件如下: < ...
最新文章
- 1418 This function has none of DETERMINISTIC,NO SQL,or R
- 渗透测试中使用浏览器的正确姿势
- 【JAVA基础篇】IO流
- 【时序】LSTNet:结合 CNN、RNN 以及 AR 的时间序列预测模型
- MFC CImage透明图片显示
- obs studio 开源直播软件 简介
- 物联网开发常用的开发板_物联网开发人员简介:物联网开发人员调查的结果
- 如何使用SC7A20
- MacBook Air响一声白屏故障情况说明及解决
- C++ 数据结构学习 ---- 栈及其应用
- 使用ajax从服务器端获取数据
- java.lang.IllegalArgumentException: java.security.InvalidKeyException: Illegal key siz
- 面试:HTTP Host 头攻击,是什么?
- 获取wifi和基站定位的基础信息
- 投掷硬币(概率dp)
- 大型演唱会无线wifi网络覆盖解决方案
- 旧话重提,还来聊聊ERP
- Advenced Installer制作C#程序安装包过程.Net和Visual C++采用静默安装配置说明
- 【小游戏】2D游戏棍子英雄StickHero(无尽模式)
- python数字比较大小的函数_python3写一个比较数字大小的简单脚本,大师来详解...