Chrome

• 解决 当使用 file:// 访问时出现跨域问题

在快捷方式的 目标(T) 地址后添加 "C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=~/chromeTemp

• 实验性功能： chrome://flags/

插件

插件列表 chrome://extensions/

快捷键

• ctrl + shift + D 切换控制台显示位置

• ctrl + [ 和 ctrl + ] 切换面板

• f6 将焦点锁定到地址栏

• ctrl + n 打开新窗口。

• ctrl + t 打开新标签页

• ctrl + 1 2 3 ... 跳转不同标签

• alt + 左右箭头 返回上一页下一页

• F9： 一步一步执行，遇到方法，进入到方法内部

• F10：一步一步执行，遇到方法，一步执行完，无法看到方法的执行情况

• F11：一步一步执行，遇到方法，进入到方法内部, 与 F9 的区别是，异步代码 会等待然后进入，比如 计时器延时执行，会等待时间后再继续进入执行

• shift + F11: 从当前的方法退出，跳出当前方法

DevTools

• Network: 查看gzip原始文件大小，将鼠标悬浮到 size 上

• Performance: 解析 JS、计算样式、重绘等页面加载等

• Memory: 页面 JS 对象和相关联的 DOM 节点的内存分布情况

• Security: 检测当面页面的安全性

• LightHouse：对页面的加载进行分析，然后给出性能的建议

• 类比 ：控制台 $ = document.querySelector $$ = document.querySelectorAll

lightHouse

可选择分类

Performance 页面的性能 首次内容绘制 （First Contentful Paint） 3s内 1.8s内为优 首次有效绘制 （First Meaningful Paint） 首次 CPU 空闲 （First CPU Idle） 可交互时间 （Time to Interactive） 速度指标 （Speed Index） 输入延迟估值 （Estimated Input Latency）

Accessibility 可访问性 监测页面的可访问性与优化建议，无障碍设计，所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站

Best Practice 最佳实践 页面是否符合最佳实践，实践性检测，如网页安全性，如是否开启 HTTPS、网页存在的漏洞等

SEO 搜索引擎优化

PWA（ Progressive Web App） 验证 PWA 的各个方面的性能情况