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代码的更多相关文章
- 如何用浏览器调试js代码
按F12打开调试工具
- 利用Google浏览器调试js代码
1.js有两种引入方式,外链和内嵌: 内嵌在浏览中直接调试,外链要在断点处写debugger; 示例代码: <!DOCTYPE html> <html lang="en&q ...
- chrome浏览器调试js,结果Sources里面找不到js文件解决办法
页面出现问题,就debug,这是前端开发工程师最常见的做法,但是有时候,我们打开开发者工具,在sources查找js文件,却发现怎么也找不到,无法设置断点.但是文件在network选项卡里确实 ...
- 使用浏览器,调试js代码
1:创建html网页和js文件 <!doctype html> <html> <head> <meta charset="utf-8"&g ...
- Google Chrome调试js代码,开发者工具之调试工具常用功能
参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂 ...
- 前端chrome浏览器调试总结
引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...
- Google Chrome浏览器调试入门————转载只为自己查看方便
Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...
- Google Chrome浏览器调试功能介绍
作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...
- chrome浏览器调试功能之后端篇
作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...
随机推荐
- [TypeScript] Optional Chaining with TypeScript 3.7
TypeScript 3.7 adds support for optional chaining. This lesson shows you how to use it in your code ...
- js 常见数组算法
数组方法概述 1.不改变原数组,返回新数组 concat() 连接两个或多个数组,两边的原始数组都不会变化,返回被连接数组的一个副本. join() 把数组中所有元素放入一个字符串中,返回字符串. s ...
- 洛谷 P2894 [USACO08FEB]酒店
题目描述 用线段树维护三个值:区间最长空位长度,从左端点可以延伸的最长空位长度,从右端点可以延伸的最长空位长度. #include<complex> #include<cstdio& ...
- CLion201914 下载安装
链接:https://pan.baidu.com/s/12Gzo8gL3iUFoL5wok6L_BQ 密码:7vw4 56ZS5PQ1RF-eyJsaWNlbnNlSWQiOiI1NlpTNVBRM ...
- selenium之 下拉选择框Select
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...
- GLTF模型查看器---优化器【转】
https://blog.csdn.net/weixin_43081805/article/details/88743277 Clay Viewer(我只想说好用,直接可以导出gltf的二进制glb格 ...
- 【转】自动化框架中引入ExtentReport美化报告
本文链接:https://blog.csdn.net/qq_30353203/article/details/82023922一.先引入三个依赖包 <dependency> <gro ...
- sass - &的作用
6.8. & in SassScript 就像在选择器中使用时一样,&在SassScript中引用当前父选择器.它是一个逗号分隔的列表和空格分隔的列表.例如: .foo.bar .ba ...
- MiniUI官方表单验证示例
原文地址:http://www.miniui.com/docs/tutorial/validator.html 表单验证 参考示例: 验证规则 表单验证 表单验证:文本提示 表 ...
- Hive的配置详解和日常维护
Hive的配置详解和日常维护 一.Hive的参数配置详解 1>.mapred.reduce.tasks 默认为-1.指定Hive作业的reduce task个数,如果保留默认值,则Hive 自 ...