Chrome的开发者模式使用技巧

  • 打开方式:fn + F12
  • 位置可以任意选择四种
  • $是jquery提供的元素选择器,用于快速定位页面上的html元素

1.Elements

  • css调试element附近的+号按键:可以用来添加当前显示元素的样式
  • element右键Edit as HTML可以直接编辑HTML元素

2.console

  • 控制台可以查看诊断信息,显示原始和结构化数据,控制和过滤输出,检查和修改页面元素,测量执行时间等。
  • 从命令行交互。控制台是一个完整的终端,您可以在开发过程中与页面进行交互。使用控制台的命令,您可以选择DOM元素,-- 配置CPU --,监视事件等。
  • 一般情况下我们用来输出信息的方法主要用到以下四个:
console.log  //用于输出普通信息
console.info  //用于输出提示性信息
console.error  //用于输出错误信息
console.warn   //用于输出警示信息

关于在console中输入命令出现undefined的原因:

点击此处

3.Sources

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

  • 常用功能就是断点调试

image-20200102165927186

4.Notework面板

  • Network面板基础知识。Network面板记录每个网络操作的信息,包括详细的时间数据,HTTP请求和响应头,cookies,WebSocket数据等。
  • Network面板概述。当开发者工具打开时Network面板自动记录所有的网络活动。当你第一次打开它时是空的。重载页面开始记录,或者等着你的应用发起新的网络活动。每个请求资源被添加为Network table中的新的一行.

5.Performance

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

  • 1、controls(控制面板窗格)。开始记录,停止记录和配置记录期间捕获的信息
  • 2、overview(概览面板)。页面性能的高级汇总
  • 3、线程面板窗格。 CPU 堆叠追踪的可视化
  • 4、统计面板窗格。以图表的形式汇总数据

img

6.Memory

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

  1. Heap snapshot: 堆快照
  2. Allocation instrumentation on timeline: 分时段的内存占用
  3. Allocation sampling: 分配抽样

7.Application

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

8.Security

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

  • https协议需要到CA申请证书,一般免费证书很少,需要交费。
  • http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
  • http和https使用的是完全不同的连接方式,用的端口也不一样。
  • http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全
Last modification:January 2nd, 2020 at 09:57 pm
来杯coffee吧