chrome使用技巧集锦

[pfan123]

Chrome调试工具介绍

Elements 板块可以看到整个页面的Dom结构。

Console 调试日志控制台。

Sources 所有资源看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。

Network 查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，MINE Type,资源大小等。

Perfomance 查看浏览器的渲染流程：解析代码,布局，绘制，合并渲染层。

Memory 含Profiles选项主要是用来检测CPU占用程度，堆栈申请的内存。

Application 显示资源，跟Sources不同的是，它会对文档类型分类。并且可以查看，增加，删除，修改页面LocalStorage，SessionStorage,Cookies等。

Security 安全检测提醒。

Chrome快捷使用调试技巧

快速切换文件

按Ctrl+P（cmd+p on mac）,就能快速搜寻和打开你项目的文件。

源代码中搜索

在要在Elements查看源码，只要定位到Elements面板，然后按 ctrl+f （cmd+f on mac）就可以

源代码快速跳转到指定行

在Sources标签中打开一个文件之后，按Ctrl + G，(or Cmd + L for Mac)，然后输入行号，chrome控制台就会跳转到你输入的行号所在的行。

或者ctrl+p后输入 :行号；

使用多个插入符进行选择

当编辑一个文件的时候，你可以按住Ctrl（cmd on mac）在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑。

格式化凌乱的js源码

当看到压缩好的一团糟的js，都不知道从何着手去看。chrome控制台有内建的美化代码功能，可以返回一段最小化且格式易读的代码。Pretty Print的在Sources标签的左下角。

选择下一个匹配项

当在Sources下编辑文件时，按下Ctrl + D (Cmd + D) ，当前选中的单词的下一个匹配也会被选中，有利于你同时对它们进行编辑。

##Chrome Dev开发者选项

万能的Chrome地址栏功能，很多人不知道，作为一个Chrome用户，必须懂的。以下我要介绍的这些指令在Chrome地址栏输入即可，可以输入 chrome://about/ (记住此命令使用about:about同理)查看所以指令

Chrome的about指令

chrome://version/ (about:version) – 显示当前版本

chrome://histograms/ (about:histograms) – 显示历史记录

chrome://dns/ (about:dns) – 显示DNS状态

chrome://cache/ (about:cache) - 重定向到 chrome://cache/ 显示缓存页面

chrome://flags/ (about:flags) – Chrome高级设置

chrome://accessibility/ – 查看浏览器当前访问的标签

chrome://appcache-internals/ - 对HTML5应用的离线存储进行管理

chrome://apps/ - Chrome网上应用商店

chrome://bookmarks/ - Chrome书签管理

chrome://cache/ - Chrome缓存, 查看浏览器缓存的文件，会用16进制的方法显示缓存文件

chrome://components/ - 查看相关组件

chrome://crashes/ - 停用启用崩溃报告

chrome://credits/ - 查看第三方软件许可证

chrome://devices/ - 查看设备，比如链接的打印机

chrome://dns/ - 查看DNS记录

chrome://extensions/ - 查看扩展程序

chrome://flags/ - 实验性功能列表

chrome://history/ - 查看历史记录

chrome://net-internals/ - Chrome的抓包工具，基本把dns、prefetch、cache等功能集成

注意，从使用经验来说 chrome://flags/ 开启实验功能列表、 chrome://net-internals/抓包工具是非常重要

如何禁止chrome自动跳转https

在chrome的地址栏输入：chrome://net-internals/#hsts

在打开的页面中， Delete domain 栏的输入框中输入：xx.xx.com（注意这里是二级域名），然后点击“delete”按钮，即可完成配置。
然后你可以在 Query domain 栏中搜索刚才输入的域名，点击“query”按钮后如果提示“Not found”，那么现在就可以使用http来访问了。

参考资料：

史上最全的Chrome使用技巧集锦

Chrome使用技巧

关于 Chrome DevTools 的 25 个实用技巧

Chrome控制台使用详解
chrome://flags/ 中有哪些值得调整的选项？