-
第一步：下载安装Google Chrome。
1、在百度搜索引擎中输入：谷歌浏览器
2、安装比较简单，双击下载的安装包直接下一步直到完成。语言选择中文。
-
第一步：打开开发者工具。
1、使用F12打开开发者工具
2、在页面上右键--》检查，打开开发者工具。
3、在浏览器有上角左键单击--》更多工具--》开发者工具（快捷键Ctrl+shift+I）
-
第三步：开发者工具概览。
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）
-
第四步：元素（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文件，使编码调试时修改代码变得非常方便。
-
第五步：源代码（Sources）。
1、查看文件：在源代码（Source）页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。
2、添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。
3、中断调试：添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的值：
4、也可以在右边的侧栏上查看：。
5、在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。
-
第六步：网络（Network）。
1、选择需要显示的请求如js或者xhr和img图片请求
2、查询每个请求顺好的时间
3、查看每个请求的具体参数
-
第七步：控制台（Console）。
1、查看JS对象的及其属性。
2、可以执行当前页面的js，在源码中打断点时对断点处的变量操作。
END
注意事项
-
常用：元素（Elements），源代码（Sources），网络（Network），控制台（Console）