本次chrome调试总结是本人亲自测试总结的chrome调试技巧。没有详细的截图。
1 shift+enter 在console中编写运行js代码，但是enter会导致运行js文件。
2 ctrl+l 清除控制台
3 ctrl+p 定位文件
4 ctrl+shift+c 快速检索元素
5 console.table() 列出使用table的布局
6 console.dir(document.body)列出body的所有属性，以javascript的形式。
7 ctrl+[ chrome开发工具的元素移动
8 开发者工具8个主要工具
|
1 Elements 查阅DOM和格式 2 Console js 代码调试 3 Sources 资源文件 4 Network 网络工具 5 Timeline 时间轴 6 Audits 审计面板 7 Profiles 配置面板 cpu 堆内存 js调试 8 Resources 监视存储 |
8 ctrl+f 查找当前文本中的信息
9 ctrl+o 过滤一个文件片段如js css
10 ctrl+shift+f 全文检索
11 sources面板下snippet中编辑js代码 右键Local modifications回滚到上一次js代码编辑节点
12 CTRL+SHIFT+J打开javascript控制台 打开了控制台后按esc打开抽屉式控制台
13 清除控制台信息clear() console.clear() ctrl+l
14 console.warn();警告 console.error();错误 console.assert(5>10,"error"); filter后面的all error 可以过滤控制台信息
15 console.log(document.body.firstElementChild);输出html的dom第一个子元素文档结构
16 console.log("%c123","color:blue;font-size:20px"); css样式更改控制台输出样式
17 计算时间开销 console.time()开始计时 console.timeEnd();结束计时 参数相同规定他们是一组计时
console.time("times")
for(var i=0;i<2000;i++){
document.write(i);
}
console.timeEnd("times");
VM1317:6 times: 72494.493ms
18 shift+?settings打开关闭
19 xPath查询dom $x('//img')查询出所有的图片
20 console.dir(document.getElementsByClassName("tooltip"));获取对象属性