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

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

Chrome的开发者模式使用技巧

• 打开方式option+command+J或F12
• 位置选择四种
• $这是jquery提供的元素选择器，用于快速定位页面上的html元素

Elements

• CSS调试element-附近的“+”号处的添加按键：可以用来添加当前显示元素的样式
• element-style框内部处可以点击样式修改或添加
• element-style框内部-color类的样式可以直接点击小颜色方块，来选择颜色的格式
• element右键Edit with HTML可以直接编辑HTML元素

console

• console.log(“打印字符串”)
• console.info(“我是个信息”)
• console.error(“我是个错误”)
• console.warn(“我是个警告”)
• console.clear/clear()清空控制台
• console.log("%年%d月",2018,11);//%d表示整数
• console.log("%f",3.1415926);//f表示小数
• console.log("%0"，console);//%0表示对象
• console.log("%c自定义样式",“font-size:30px;color:#00f”);
• console.log("%c我是%c自定义样式",“font-size:20px;color:green”,“font-size:10px;color:red”);

表格形式输出
var str=[{name:“Andrew”,age:13,sex:“men”},
{name:“Andrew”,age:13,sex:“men”},
{name:“Andrew”,age:13,sex:“men”}];
console.log(str);console.able(str);

Sources

Sources功能面板是资源面板，分为五个部分，五部分不是独立的，他们互相关联，共同实现监控js在执行期的活动功能

1. Page： 显示页面加载的脚本文件—html，css，js等
2. **Filesystem：**本地文件系统API，帮助我们控制私有的本地文件系统“沙箱(sandbox)”，网络应用可以创建、读取、导航用户本地文件系统中的沙盒部分以及向其中写入数据（https://blog.csdn.net/salonzhou/article/details/28275713 ）
3. **Overrides：**可使用自己的本地资源覆盖网页所使用的资源，可以使用本地css文件覆盖网页的css文件，修改样式；此功能是为了应对在开发者工具中修改了东西后一刷新什么都没了的尴尬
4. **Contnen script：**运行在网页上下文中的js脚本，可以读取网页信息（文字，图片等）、修改网页信息、模拟用户操作（填充表单、点击按钮等）、代表网页发送ajax请求，但不能访问网页js中定义的函数和变量，也不能访问其它Content Scripts中定义的函数和变量
5. **Snippets：**提供了在chrome里保存及运行一段js代码的功能，我们可以简单地把snippet当做是笔记，用来搭配直接修改js进行调试（因为刷新后添加的代码就不见了）来记录下每次调试需要用到的代码，也可以用作写一些小demo来试函数、api等功能
   

Network

• 使用 Network 面板记录和分析网络活动
• 整体或单独查看资源的加载信息
• 过滤和排序资源的显示方式
• 保存、复制和清除网络记录
• 根据需求自定义 Network 面板

Network面板由五个窗格组成

1. Controls： 使用这些选项可以控制 Network 面板的外观和功能
2. Filters： 使用这些选项可以控制在 Requests Table 中显示哪些资源。
3. Overview： 此图表显示了资源检索时间的时间线。如果看到多条竖线堆叠在一起，则说明这些资源被同时检索
4. Requests Table： 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。
5. Summary： 此窗格列出了请求总数、传输的数据量和加载时间
   
   ** 默认情况下，Requests Table 会显示以下列**
   Name： 资源的名称。
   Status： HTTP 状态代码。
   Type： 已请求资源的 MIME 类型。
   Initiator： 发起请求的对象或进程。值为以下选项之一：
   Parser： Chrome 的 HTML 解析器发起请求。
   Redirect： HTTP 重定向发起请求。
   Script脚： 本发起请求。
   Other： 某些其他进程或操作发起请求，例如用户通过链接或者在地址栏中输入网址导航到页面。
   Size： 响应标头（通常为数百字节）加响应正文（由服务器提供）的组合大小。
   Time： 从请求开始至在响应中接收到最终字节的总持续时间。
   Timeline： Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。

Performance

performance面板可以记录和分析页面在运行时的所有活动，用以解决性能瓶颈问题（无痕模式可以使性能分析更准确）
performance面板有如下四个窗格

1. controls： 开始记录，停止记录和配置记录期间捕获的信息
2. overview： 页面性能的高级汇总
3. 火焰图： CPU 堆叠追踪的可视化
4. 统计汇总： 以图表的形式汇总数据
   
   颜色表示
   HTML 文件为蓝色
   脚本为黄色
   样式表为紫色
   媒体文件为绿色
   其他资源为灰色

Memory

Memory面板可以查看当前页面的javascript占用的内存情况
Memory面板的三个主要选项

• Heap snapshot： 堆快照
• Allocation instrumentation on timeline： 分时段的内存占用
• Allocation sampling： 分配抽样

Application

Application面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

• Local Storage： 开发过程中使用了local storage来存储键值对(KVPs)，那就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
• Application Cache ： 可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
• Frames： 将页面上的资源按frame类别进行组织显示。

Security

Security面板可以调试当前网页的安全和认证等问题并确保已经在网站上正确地实现HTTPS
HTTPS和HTTP的区别主要为以下四点：

1. https协议需要到CA申请证书，一般免费证书很少，需要交费。
2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3. http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4. http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

Audits

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