chrome开发者工具使用教程

1. 第一步：下载安装Google Chrome。

   1、在百度搜索引擎中输入：谷歌浏览器

   2、安装比较简单，双击下载的安装包直接下一步直到完成。语言选择中文。

   

2. 第一步：打开开发者工具。

   1、使用F12打开开发者工具

   2、在页面上右键--》检查，打开开发者工具。

   3、在浏览器有上角左键单击--》更多工具--》开发者工具（快捷键Ctrl+shift+I）

   

3. 第三步：开发者工具概览。

   1、内存面板（Memory）

   该面板主要能做：

   使用 Chrome 的任务管理器了解您的页面当前正在使用的内存量。

   使用 Timeline 记录可视化一段时间内的内存使用。

   使用堆快照确定已分离的 DOM 树（内存泄漏的常见原因）。

   使用分配时间线记录了解新内存在 JS 堆中的分配时间。

   2、元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。

   3、源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

   4、网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。 

   5、性能面板（Performance）

   使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。

   6、Audits面板简介

   对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

   7、应用面板（Application）

   该面板主要能做：

   查看和修改本地存储与会话存储。

   检查和修改 IndexedDB 数据库。

   对 Web SQL 数据库执行语句。

   查看应用缓存和服务工作线程缓存。

   点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。

   8、安全面板（Security）

   该面板主要能做：

   使用 Security Overview 可以立即查看当前页面是否安全。

   检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。

   9、控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。

   常用：元素（Elements），源代码（Sources），网络（Network），控制台（Console）

   

4. 第四步：元素（Elements）。

    

   1、查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

   2、查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。如下图中的class、name、autocomplete等属性的值。 

   3、当然从源代码中读到的只是一部分显式声明的属性，要查看该元素的所有属性，可以在右边的侧栏中查看： 

   4、修改元素的代码与属性：点击元素，然查看右键菜单，可以看到chrome提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择Edit as HTML选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。当然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

   5、查看元素的CSS属性：在元素的右边栏中的styles页面可以查看该元素的CSS属性，这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件，使编码调试时修改代码变得非常方便。

   

   

   

   

5. 第五步：源代码（Sources）。

    

   1、查看文件：在源代码（Source）页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。

   2、添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。 

   3、中断调试：添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的值： 

   4、也可以在右边的侧栏上查看：。

   5、在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

   

   

   

   

   

6. 第六步：网络（Network）。

   1、选择需要显示的请求如js或者xhr和img图片请求

   2、查询每个请求顺好的时间

   3、查看每个请求的具体参数

   

   

   

7. 第七步：控制台（Console）。

   1、查看JS对象的及其属性。

   2、可以执行当前页面的js，在源码中打断点时对断点处的变量操作。

   

   

   END

注意事项

• 常用：元素（Elements），源代码（Sources），网络（Network），控制台（Console）