chrome功能介绍
一，打开方式
以上三种方法都可以打开开发者工具。
二，界面介绍
1、元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
2、控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
3、源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
4、网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。
5、性能面板（Performance）：使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。
6、内存面板（Memory）：显示浏览器的内存占比。
7、应用面板（Application）：查看和修改本地存储与会话存储。检查和修改 IndexedDB 数据库。对 Web SQL 数据库执行语句。查看应用缓存和服务工作线程缓存。点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。
8、安全面板（Security）：使用 Security Overview 可以立即查看当前页面是否安全。
检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。
9、面板简介（Audits）对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。
(adblock plus是安装的插件，忽略)
10、在这栏的最右边有三个点，里面有
dock side----开发者工具的布局。
show console drawer 展示你的控制台。
search 查找。
run command 运行命令。
open file 打开文件。
more tool 更多工具。 （里面包括animations动画，network condition 网络状况，layers 层，shortcut设置快捷键，等）。
setting 设置。
help 帮助。
三，遗落下的一些符号
清除console对话框的内容。
隐藏console的边栏。
toggle device toolbar切换设备工具栏，模拟手机版浏览器。
自己也是新手，有什么写的不好的，落下的，请谅解，有错误的可以指出，谢谢大家的浏览。
原文：https://www.cnblogs.com/dingh/p/12987673.html