chrome浏览器调试

最新推荐文章于 2024-11-07 16:28:57 发布

superjunjin

最新推荐文章于 2024-11-07 16:28:57 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签：调试 chrome 浏览器

本文链接：https://blog.youkuaiyun.com/superjunjin/article/details/53448462

HTML5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Chrome浏览器的调试功能，包括快捷键使用，如F8、F10、F11等，以及如何通过'add to watch'来观察变量值。此外，详细讲解了DOM断点的设置和应用，如何利用DOM Breakpoints监听DOM变化。同时，文章还探讨了console的各种用法，如console.group、console.table、console.assert和console.count，帮助开发者更好地组织和分析输出信息。最后，提到了使网页可编辑的技巧，通过document.body.contentEditable='true'实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，调试快捷键

F8：下个断点
F10：单步执行
F11：单步跳入
shift+F11：单步跳出

二，add to watch

选中变量，右键选择add to watch，查看变量值比较方便

三，DOM Breakpoints

有时候我们需要监听某个 DOM 被修改情况（js代码比较复杂，找不到哪里对dom做的改变），那么我们可以直接在 DOM 上设置断点。

这里写图片描述

如图所见，在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点：
1，子节点修改
2，自身属性修改
3，自身节点被删除
选中之后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时，代码就会在那里停下来，如下图所示。

这里写图片描述

对于下面代码，找到div_item元素，选择node removal监听，即可监听到

var e = document.getElementById('div_item'); 
e.parentElement.removeChild(e);

对于下面代码，找到item-radio元素组的第一个元素，选择自身属性修改监听，在call stack中，往下一步步找，即可监听到控制它的业务代码

var radio = angular.element('.item-radio')[0];
angular.element(radio).addClass("select");

这里写图片描述

示例代码 http://download.youkuaiyun.com/detail/superjunjin/9702930

四，console

1，console.group

console.log配合console.group 与console.groupEnd，分类管理log。这适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。

console.group("app.foo");
console.log("来自foo模块的信息 blah blah blah...");
console.groupEnd();
console.group("app.bar");
console.log("来自bar模块的信息 blah blah blah...");
console.groupEnd();

这里写图片描述

2，console.table

直接以表格的形式将数据输出

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);

这里写图片描述

3，console.assert

当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。

var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');

这里写图片描述

4，console.count

除了条件输出的场景，还有常见的场景是计数。
当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。

5，网页可编辑

document.body.contentEditable=’true’;