Google开发者工具

日期:2014-5-20 19:43 | 标签: Google | 阅读:1451

Google开发者工具真是一块宝地,每每都会爆出一些让人惊艳的东东,这里主要做一些记录。

记录控制台打开次数

参考自: https://kyriosli.github.io/console.html

<body>
<h1>Press F12 / ctrl+shift+J / cmd+opt+J</h1>
<h2>console opened: <span id="count">0</span> times</h2>
<script>
    (function () {
        var span = document.getElementById('count');
        var count = 0;
        var r = /./;
        console.log(r);
        r.toString = function () {
            span.textContent = ++count;
            return '';
        };
    })();
</script>
</body>

控制台主题

国内有一篇文章有介绍:
http://i.wanz.im/2011/08/17/custom_your_chrome_devtools_style/
大致是需要下载对应的样式,然后找到对应的目录覆盖原样式,看日期便知这篇文章已经过期。既然有这个需求,应该没必要这么hack吧,肯定有对应的插件撒:

#Google搜索:  
Themes for Chrome Developer Tools

很快你就可以尽情选取你想要的主题了!最后,启用主题吧:

  1. 启用主题
    Chrome > 设置 > 更多工具> 拓展> DevTools Theme: Zero Dark Matrix = 启用
    
  2. 启用开发者工具试验模式
    输入url:chrome://flags > 启用开发者工具试验模式
  3. 允许自定义主题
    打开开发者工具 > 开发设置界面(Shift+?) > 试验> 允许自定义主题.
  4. 不行的话,重启试试

什么?想自己开发?好吧,参考:
https://github.com/karelvuong/devtools-chromegray--dark

调试JS(VM+数字)

VM是虚拟机(Virtual Machine)的缩写,后面的数字是代码的编号ID,主要是为了区别原网页的js与其他来源的js(比如eval创建的, ajax获取的等),实质上没啥意义。

console.log

某日,同事在调试时,发现对象数组明明有值,展开时却显示数组长度为0,且在控制台里遇到一段这样的提示:

Object value at left was snapshotted when logged, value below was evaluated just now.

大意是:左边对象的值是log时候的快照,下面的值是展开的时候计算出来的。oops!难道谷歌出bug了? 其实,主要是你看到的不是真实的,假如你在显示快照后修改了对应的值,自然就不一样咯。其实这个很好排查,也不怪,但是如果你嵌套了好几层,而且各种全局修改,甚至自己都不记得了,那么请不要怪谷歌,根据这条线索好好找找吧。
特别注意内置对象如event,事件触发完毕后将自动重置。

console方法getEventListeners

获取绑定在元素上的事件,其实在右侧有可视化的面板,一般用不着

getEventListeners(document.querySelector('.class'));

其实,你需要明了,只要在面板中有的,基本上有现成的函数可调用。

查看:hover样式

请注意控制台Elements->style右上角的工具栏按钮,其从左到右分别可以:

  1. 添加样式规则
  2. 增加类
  3. 显示hover、active、focus、visited等样式(正解)
  4. 监听动画

shallow size && retained size

对象本身占用的内存与释放后可以获得的内存

查看资源加载时间

  1. view-network-timing-details-for-a-specific-resource
  2. understanding-resource-timing

参考

基本功能可参考: http://web.jobbole.com/82558/
优雅且高效的使用Chrome-Developer-Tools-上
一些小技巧: http://www.alloyteam.com/2015/06/chrome-diao-shi-ji-qiao/

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式