码迷,mamicode.com
首页 > 其他好文 > 详细

chrome调试第二章

时间:2016-07-30 16:24:06      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

本次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

 

chrome调试第二章

标签:

原文地址:http://www.cnblogs.com/pangdudu/p/5720975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!