Open pfan123 opened 7 years ago
Elements 板块可以看到整个页面的Dom结构。
Console 调试日志控制台。
Sources 所有资源看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。
Network 查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，MINE Type,资源大小等。
Perfomance 查看浏览器的渲染流程：解析代码,布局，绘制，合并渲染层。
Memory 含Profiles选项主要是用来检测CPU占用程度，堆栈申请的内存。
Application 显示资源，跟Sources不同的是，它会对文档类型分类。并且可以查看，增加，删除，修改页面LocalStorage，SessionStorage,Cookies等。
Security 安全检测提醒。
快速切换文件
按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地址栏功能，很多人不知道，作为一个Chrome用户，必须懂的。以下我要介绍的这些指令在Chrome地址栏输入即可，可以输入 chrome://about/ (记住此命令使用about:about同理)查看所以指令
chrome://about/
Chrome的about指令
chrome://version/ (about:version) – 显示当前版本
chrome://version/ (about:version)
chrome://histograms/ (about:histograms) – 显示历史记录
chrome://histograms/ (about:histograms)
chrome://dns/ (about:dns) – 显示DNS状态
chrome://dns/ (about:dns)
chrome://cache/ (about:cache) - 重定向到 chrome://cache/ 显示缓存页面
chrome://cache/ (about:cache)
chrome://flags/ (about:flags) – Chrome高级设置
chrome://flags/ (about:flags)
chrome://accessibility/ – 查看浏览器当前访问的标签
chrome://accessibility/
chrome://appcache-internals/ - 对HTML5应用的离线存储进行管理
chrome://appcache-internals/
chrome://apps/ - Chrome网上应用商店
chrome://apps/
chrome://bookmarks/ - Chrome书签管理
chrome://bookmarks/
chrome://cache/ - Chrome缓存, 查看浏览器缓存的文件，会用16进制的方法显示缓存文件
chrome://cache/
chrome://components/ - 查看相关组件
chrome://components/
chrome://crashes/ - 停用启用崩溃报告
chrome://crashes/
chrome://credits/ - 查看第三方软件许可证
chrome://credits/
chrome://devices/ - 查看设备，比如链接的打印机
chrome://devices/
chrome://dns/ - 查看DNS记录
chrome://dns/
chrome://extensions/ - 查看扩展程序
chrome://extensions/
chrome://flags/ - 实验性功能列表
chrome://flags/
chrome://history/ - 查看历史记录
chrome://history/
chrome://net-internals/ - Chrome的抓包工具，基本把dns、prefetch、cache等功能集成
chrome://net-internals/
注意，从使用经验来说 chrome://flags/ 开启实验功能列表、 chrome://net-internals/抓包工具是非常重要
在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/ 中有哪些值得调整的选项？
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自动跳转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/ 中有哪些值得调整的选项？