Chrome的开发者模式及debug mode的使用

Chrome的开发者模式

• Chrome开发者工具(DevTools或Developer Tools)是Google Chrome浏览器中内置的一组网页制作和调试工具。
• 开发者工具为网页开发人员提供了访问浏览器及其网页应用程序内部的深入访问。使用开发者工具有效地跟踪布局问题，设置JavaScript断点，并获得代码优化的见解。现在让我们来看看各个面板。

• 打开方式 fn+f12

1:Elements (元素)面板

• 使用Elements面板通过自由操作DOM和CSS来反复调整网站的布局和设计。

• 检查和编辑页面与样式-检查和实时编辑 DOM 树中的任何元素(html标签)。

• 检查和编辑页面与样式-检查和编辑框模型参数。使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可。同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。

  • chrome常见API
    
    
    
  • $_ 返回最近评估的表达式的值。
    
    $0~$4则代表了最近5个你选择过的DOM节点。
    在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，
    这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，
    以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。
    
    $0 返回最近一次选择的元素或 JavaScript 对象
    
    $1 返回仅在最近一次之前选择的元素或对象，依此类推
    
    
    
  • $(selector)<br/>eg:$(“h2”)
    $(selector) 返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。（此函数等同于 document.querySelector() 函数)
    
    
    
  • clear()
    
    clear() 清除其历史记录的控制台。
    
    
    
  • copy(object)
    
    copy(object) 将指定对象的字符串表示形式复制到剪贴板。
    
    eg:copy(document.body) -> ctrl+v
    
    

2:Console（控制台）面板

• 控制台可以查看诊断信息，显示原始和结构化数据，控制和过滤输出，检查和修改页面元素，测量执行时间等。

• 从命令行交互。控制台是一个完整的终端，您可以在开发过程中与页面进行交互。使用控制台的命令，您可以选择DOM元素，配置CPU，监视事件等。

• 一般情况下我们用来输入信息的方法主要是用到如下四个

    1、console.log 用于输出普通信息
  
    2、console.info 用于输出提示性信息
  
    3、console.error用于输出错误信息
  
    4、console.warn用于输出警示信息
  

3:Sources（源代码 ）面板

• 使用断点进行调试。(2种方法）

• 使用开发者工具的工作区设置持久化-将本地源文件添加到工作区。要将本地文件夹的源文件设置为可以在 Sources 面板中修改，请执行以下操作：

    (1)右键点击左侧面板。
  
    (2)选择 Add Folder to Workspace。
  
    (3)选择您想要映射的本地文件夹的位置。
  
    (4)点击允许，授予 Chrome 访问该文件夹的权限。
  

通常，本地文件夹包含网站的原始源文件，用于在服务器上填充网站。如果您不希望通过工作区更改这些原始文件，请复制文件夹并将其指定为工作区文件夹。

• 使用开发者工具的工作区设置持久化-本地文件管理。除了修改现有文件外，您还可以在为工作区使用的本地映射目录中添加和删除文件。

1.添加文件。要添加文件，请执行以下操作：

	(1)右键点击 Sources 左侧窗格中的文件夹。

	(2)选择 New File。

	(3)为新文件键入一个包含扩展名的名称（例如 newscripts.js）并按 Enter；文件将添加到本地文件夹中。

2.删除文件。要删除文件，请执行以下操作：

	(1)右键点击 Sources 左侧窗格中的文件。

	(2)选择 Delete 并点击 Yes 确认。

3.备份文件。对文件进行重大更改前，复制原始文件进行备份非常有用。要复制文件，请进行以下操作：

	(1)右键点击 Sources 左侧窗格中的文件。

	(2)选择 Make a Copy...。

	(3)为文件键入一个包含扩展名的名称（例如 mystyles-org.css）并按 Enter。

4：Network(网络)面板

• Network面板基础知识。Network面板记录每个网络操作的信息，包括详细的时间数据，HTTP请求和响应头，cookies，WebSocket数据等。

• Network面板概述。当开发者工具打开时Network面板自动记录所有的网络活动。当你第一次打开它时是空的。重载页面开始记录，或者等着你的应用发起新的网络活动。每个请求资源被添加为Network table中的新的一行.

5：Performance 面板

performance面板有如下四个窗格：

• 1、controls（控制面板窗格）。开始记录，停止记录和配置记录期间捕获的信息

• 2、overview（概览面板）。页面性能的高级汇总

• 3、线程面板窗格。 CPU 堆叠追踪的可视化

• 4、统计面板窗格。以图表的形式汇总数据

6：memory 面板

• chrome浏览器自带一个memory功能，可以查看当前网页的JavaScript占用的内存情况
  点击F12出来的界面中的【Memory】选项，可以看到三个主要的选项：

  1）Heap snapshot：堆快照

  2）Allocation instrumentation on timeline：分时段的内存占用

  3）Allocation sampling：分配抽样

7：Application （应用）面板

• Application 面板概述。使用Application面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

8：Security（安全）面板

• Security面板概述。HTTPS 为您的网站和将个人信息委托给您的网站的人提供了重要的安全性和数据完整性。在 Chrome开发者工具中使用 Security 面板调试安全问题，确保您已在自己的网站上恰当地实现 HTTPS。包括以下功能：

    (1)使用 Security Overview 可以立即查看当前页面是否安全。
  
    (2)检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。
  

9：Audits（审计）面板

• Audits（审计）面板概述。Audits的是用来分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案。对网络和页面性能进行检测，根据测试的结果进行优化。但是检测结果只是参考，在实际的项目中肯定有特殊情况存在，并不能为了满足某项测试结果而忽略特定情况的存在。

    (1)基本操作：选择左侧栏Audits，单击Run
  

10设备模式（Device Mode）

• 使用设备模式构建完全响应式，移动优先的网络体验。

• 使用 Chrome 开发者工具的 Device Mode 打造移动设备优先的完全自适应式网站。

    (1)当 Device Mode 打开时，该图标呈蓝色。
  
    (2)当 Device Mode 关闭时，该图标呈灰色。
  

  还可以通过按 Command+Shift+M (Mac) 或 Ctrl+Shift+M（Windows、Linux）来切换 Device Mode。
  要使用此快捷键，鼠标焦点需要位于开发者工具(DevTools )窗口中。