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"
测试手机版网页

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