Chrome Devtools

oncopy 和addEventListener绑定的事件监听都在此显示

chrome开发者工具功能拾遗:Sources面板篇

查看节点所有属性

图片的话就不要看Network了,一个页面图片太多了,我们可以点击网页上的图片然后右键-》审查元素,然后Elements会定位到一个<img />标签,那个src属性就是你要的图片地址了,有的网页会把右键禁掉了,下面有介绍打开Chrome DevTools的方法,用“放大镜”定位图片元素。

image.png

console.table打印数组对象(数组每一项是对象)信息非常好

有些网站按F12是没有用的,因为JavaScript脚本把浏览器的默认事件给阻止掉了,但是没事,只要你能打开Chrome DevTools,脚本怎么阻止都没有用。12找到network,下面仔细找,总能找到cdn地址,复制下来贴迅雷里就能下了。

想在Chrome写些日常感悟?或者有好的文章想收藏下来?在地址栏输入“data:text/html,%20<html%20contenteditable>Title”,最后按Enter键,瞬间让你的Chrome变成记事本!PS:已被自己的英语水平帅哭,谁叫我们都是过了六级的人呢?
通过snippet载入jquery

用的比较多的是hover,可以获取到鼠标悬停下的样式表。

给没有jquery的网站暂时性加载上jqueryvar fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", 'http://cdn.bootcss.com/jquery/1.11.3/jquery.js')
document.getElementsByTagName("head")[0].appendChild(fileref)

在Element标签下,ctrl + f 搜索框里,可以用 css 选择器来查找。

截屏
image.png

选择一个DOM元素,按下H键,隐藏元素

ctrl+shift+f打开搜索,可以在所有source中搜索,再也不用担心找不到js片段了

打开审查元素后长按刷新键

在source中查找某个js文件:Ctrl/Command+G,(tips:这种方法很恶心的是会在输入框中默认加了冒号)
在当前js文件中查找某个方法:Ctrl/Command+shift+O(这个很nice)

在console面板中只能显示一行,太难看且调试不了
在面板中的Sources部分的Snippets,可以新建一个代码片段来测试,很是方便
写上代码就随意玩儿吧,可以Ctrl+S保存到本地,下次打开它还在

另外的一个技巧是,想输出的时候,表达式不加逗号就行了
12306购买火车票时选择上/中/下铺。
F1查看所有的快捷键
List of Chrome URLs

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-agent="Android"
测试手机版网页

拖曳地址栏前面的小图标到收藏栏,可以快速收藏。

推荐阅读更多精彩内容