https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks

 
1、console面板多行输入
Shift + Enter 可以换行,而不是执行代码
 
2、Ctrl + Shift + C 可以直接进入审查元素的模式
 
3、Ctrl + L 清除console历史
 
4、选择页面上面的一个元素,然后在console里面输入$0,这个元素就可以被脚本使用了,如果页面用了jquery那就使用$($0)
 
5、使用XPath $x(xpath) 来选择节点  $x('//img'):

However, the function also accepts an optional second argument for the path context - i.e $x(xpath, context). This lets us select a specific context (e.g an iframe) and run an XPath query against it.

var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);

which queries the images within the specified iframe.

6、console.dir(object) 可以查看某个对象所有的属性
 
7、console.time() 和 console.timeEnd() 用来计算时间
 
 
8、在timeline里面,如果看到有黄色带感叹号的三角形,意味着你的代码触发了 强制/同步 的布局事件,这些事件对页面性能有明显影响(回流)
 
更多关于 console
console.warn("1")  console.error("1")  console.info("1")   只是输入icon不同
 
console.assert(false, "My assertion always fails");
类似于单元测试中的断言,当前面的表达式为 false 的时候,输出后面的信息
 
console.count 用来统计被执行了多少次
 
Profiles 面板选中Collect JavaScript CPU Profile,点击开始然后刷新页面点击停止
1、Bottom Up视图按照函数对性能影响排序
2、Top Down视图反应调用栈性能
切换成chart视图之后,横坐标表示的是时间,竖坐标表示的是调用栈(call stack),对性能消耗大的图片越宽,因此重点关注很宽的图片,不管他们在调用栈里的高低

Chrome DevTools 开发者工具 技巧 调试的更多相关文章

  1. Chrome DevTools开发者工具调试

    1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...

  2. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  3. 在 Chrome 开发者工具中调试 node.js

    命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...

  4. [转]谷歌Chrome浏览器开发者工具教程—JS调试篇

    来源:http://blog.csdn.net/cyyax/article/details/51242720 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工 ...

  5. Chrome开发者工具 debug 调试

    Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Network 标签页:用于查看 HTTP ...

  6. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

  7. 谷歌Chrome浏览器开发者工具的基础功能

    上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要 ...

  8. 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍

    爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...

  9. chrome浏览器开发者工具使用教程[转]

    转自:http://www.cr173.com/html/16930_1.html 更多资源:https://developers.google.com/chrome-developer-tools/ ...

随机推荐

  1. poj3468树状数组的区间更新,区间求和

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 47174   ...

  2. hdu1760博弈SG

    A New Tetris Game Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  3. Judge Route Circle

    Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...

  4. js 防止变量冲突

    解决方法 sc1 和sc2 的a都是window.a 会指向一个变量 1:使用匿名函数将脚本包起来,全局变量用来通信 如window.x; 2:命名空间 代码: <script> (fun ...

  5. Oracle之 any 、some、all解析

    oracle之 any.some.all 解析 因为很少用到, 所以几乎忘记了这几个函数, 不过它们还是很有用的使用它们可以大大简化一些SQL文的语法, 至于效率问题, 如CCW所说它们和EXISTS ...

  6. cocos2dx - v2.3.3编辑器骨骼动画

    接上一节内容:cocos2dx - v2.3.3编辑器简单使用及不同分辨率适配 本节主要Cocos骨骼动画的创建及使用 一.新建 用Cocos Studio工具新建一个状态栏项目.如下图: 当然也可以 ...

  7. 一份传世典文:十年编程(Teach Yourself Programming in Ten Years)

    原文:Teach Yourself Programming in Ten Years作者:郭晓刚翻译:郭晓刚(foosleeper@163.net)最后修订日期:2004-3-192005-01-12 ...

  8. 完整Log4Net配置信息

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...

  9. configparser模块(拷贝)

    该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值). 创建文件 来看一个好多软件的常见文档格式如下: [DEFAULT] ...

  10. 脱壳第一讲,手工脱壳ASPack2.12的壳.ESP定律

    脱壳第一讲,手工脱壳ASPack2.12的壳.ESP定律 一丶什么是ESP定律 首先我们要明白什么是壳.壳的作用就是加密PE的. 而ESP定律就是壳在加密之前,肯定会保存所有寄存器环境,而出来的时候, ...