基本架构

chrome功能介绍

一，打开方式

• 按键盘F12
• 右击选择检查
• 在网站右上角找到三个点，点击选择更多工具中的开发者工具
• 快捷键Ctrl+shift+I）

以上三种方法都可以打开开发者工具。

二，界面介绍

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切换设备工具栏，模拟手机版浏览器。

 

 

自己也是新手，有什么写的不好的，落下的，请谅解，有错误的可以指出，谢谢大家的浏览。