浏览器

@Chrome

Download: . 官网 www.google.cn
Install: . 略
Setting: 默认浏览器：default browser

百度/必应搜索引擎：baidu/biying search engine
Shortcut: . 缩放窗口：CTRL + /-

. 还原窗口：CTRL + 0

Inspect

. 要学会偷

. 在浏览器中，按 F12 打开浏览器的开发者工具视图|检查功能页，或鼠标右键单击 → 检查

. 默认是上下布局：上面是元素结构和页面功能，下面是元素样式；也可以调整为左右布局

Selector - 1

. 拾取某个元素，在底部的样式 style 选项卡中查看元素的样式信息，包括继承的样式、被覆盖的样式

. 特别适合调试样式效果

. 页面元素较多的情况下，还需要在元素 Element 中，慢慢的一层一层选择，直至定位到目标元素

Toggle Device -2

. 切换设备，查看不同设备下的页面效果

. 可以添加或定制设备

. 在移动端和桌面端切换，特别是响应式开发要切换到移动端

Element - 3

. 检查/修改文档/元素结构

. 偷图片、偷视频、偷...

. 捕获节点屏幕截图 Capture node screenshot；特别适合超大截图，不需要滚屏哦

Console - 4

. 查看控制台输出

. 开发过程中，逻辑相关的部分，请多使用 console.log() 调试

. 右键记录，选择复制 console，即可复制，便于分享，无须拖拽复制

. 无须拼接

console.log('a', a, 'b', b, 'c', c );
console.log({ a, b, c });

. 测试代码运行时间

console.time('timer')
for (let i = 0; i < 1000; i++) {
  //不要嵌套使用console，会导致计时增加
}
console.timeEnd('timer')

. 清屏

console.clear()

Network - 5

. 网络情况，各种资源图片、样式文件等加载情况

. stop recording：停止网络追踪

. clear network log：清空记录

. preserve log：保留记录，适合页面跳转时查看

. no Throttling：不限流；可以调整网络带宽以便查看数据加载情况，如 fast 3G、slow 3G、offline

Application -6

. Local Storage

. Session

. Cookie

Style -7

. 从上到下，越靠上，样式的优先级越高

内联样式 -1：写在元素标签上的样式，优先级最高

叠加样式 -2-3：如果有重复的样式，上面的会覆盖下面的；如果没有，则层层叠加 - 层叠样式表

浏览器代理样式 -4：不同的浏览器的渲染引擎有差异，建议使用现代主流浏览器开发

盒模型 -5：选择元素的盒模型

特定样式的编辑器 -9-10：专有样式检查工具，所见即所得：阴影 Box-shadow、弹性盒子 Flexbox、网格 Grid ...

Computed - 8

. 元素计算|渲染出来的最终样式信息

Other

Source：增加断点 breakpoint、记录点 logpoint

Coverage：参考使用录优化页面

CSS Overview：统计样式信息

Simulation

真机调试

. 开发应严格遵循设计稿；更多细节，请访问 UI 设计稿验收

. 本着移动优先的原则，通常要查看项目在真机上的效果，所以真机调试的步骤必不可少[除非明确项目的定位就是桌面端]

1. 环境需求

. 插件需求：Live Server

. 网络需求：开发电脑和手机链接同一个 WiFi | 同一个域

2. 环境配置

2.1. 查看本机 IP 地址；按 Win + R，打开命令运行窗口，输入 CMD，打开控制台/小黑屋，输入 ipconfig，查看本机 IPv4 地址；或者按 Win+I，打开系统设置，在网络的本地连接中查看网络信息

C:\Users\cnplaman>ipconfig

Windows IP 配置

以太网适配器 VMware Network Adapter VMnet1:

   //VMware

以太网适配器 VMware Network Adapter VMnet8:

   //VMware

无线局域网适配器 WLAN:

   连接特定的 DNS 后缀 . . . . . . . :
   IPv6 地址 . . . . . . . . . . . . : 2408:8220:3434:3330::2
   IPv6 地址 . . . . . . . . . . . . : 2408:8220:3434:3330:f2c:629f:80e4:3bee
   临时 IPv6 地址. . . . . . . . . . : 2408:8220:3434:3330:dc54:f31f:ae4f:643e
   本地链接 IPv6 地址. . . . . . . . : fe80::62d7:b476:7de2:1bef%8
   IPv4 地址 . . . . . . . . . . . . : 192.168.1.3
   子网掩码  . . . . . . . . . . . . : 255.255.255.0//here
   默认网关. . . . . . . . . . . . . : fe80::1%8
                                       192.168.1.1

以太网适配器 蓝牙网络连接:

   //Bluetooth

C:\Users\cnplaman>

2.2. 打开 Vs code，点击右下角管理按钮，选择设置 setting，或者直接按 CTRL + ,

2.3. 选择扩展 Extension 里的 Live Server Config，修改主机 host 为查询到的 IPv4 地址

2.4. 重新启动 Vs code

3. 真机调试

. 使用 Open With Live Server 打开浏览器

. 在浏览器的页面中，右键单击 → 为此页面创建 QR 代码，打开一个二维码，使用手机扫码，即可在手机端预览页面效果

真机查看效果时，不需要每次扫码，手机端页面不要关闭即可保持实时更新

按 Win + I 打开系统设置，在网络属性中查看 IPv4 地址

Lighthouse

. Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量

. 是 Chrome 扩展程序：检查 → Lighthouse

. 对 HTML 页面运行一连串的测试，生成一个有关页面性能的报告

. 参考失败的测试，采取措施改进应用

[] 结合浏览器的调试功能，指出下列代码片段的问题

<nav id="main" id='nav'>
    <ul class="nav-wrap'>
        <li class="logo main">
            <img src="./imgs/1.jpg">
        </li>
        <li style="color:#f40">item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</nav>