前端网络调试工具-前端怎么调试代码

发布时间：2023-02-08 22:19 浏览次数：次作者：佚名

这是我参加“第五届青训营”同伴笔记创作活动的第6天

前端开发调试PC端调试一、前端Debug的特点多平台（浏览器、Hybrid、NodeJS、小程序、桌面应用等）多环境（本地开发环境、在线环境） Multi-工具（Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...）多种技能（Console、BreakPoint、sourceMap、proxy等） 2.Chrome DevTools2.1动态修改元素和样式

可以通过以下两种方式强制激活伪类：

2.2 控制台 2.3 源选项卡

区域一：页面资源文件目录树

区域二：代码预览区

区域三：调试工具栏，从左到右分别是

区域 4：断点调试器

2.3.1 断点与观察

2.3.2 作用域和调用栈

2.3.3 源映射

mappings字段存储源文件和Source Map之间的映射关系

映射见：...

源地图标准：docs.google.com/document/d/...

2.4 网络

区域 1：控制面板

区域 2：过滤面板

区域三：概览区

区域 4：请求表面板

区域 5：摘要面板

区域 6：请求详细信息面板

2.5 应用

下载.png

应用程序面板显示与本地存储相关的信息

点击左侧Application下Stroage面板中的Clear Site Data，清除网页本地存储数据

2.6 性能（与网页性能相关）

区域 1：控制面板

区域 2：概览面板

区域 3：线程面板

区域 4：统计面板

2.6.1 性能应用示例

googlechrome.github.io/devtools-sa ...

页面卡住 => 查看 FPS 指标 => 查找性能瓶颈 => 优化代码

2.7 灯塔（观看表演）

Larqest Contentful Paint (LCP)：最大内容绘画，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5 秒内发生。

First Input Delay (FID)：首次输入延迟前端网络调试工具，衡量交互性。为提供良好的用户体验，页面的 FID 应为 100 毫秒或更短

Cumulative Layout Shift (CLS)：累积布局偏移，衡量视觉稳定性，为了提供良好的用户体验，页面的CLS应该保持在0.1以下

前端开发调试之移动端调试一、真机调试用Lightning数据线连接iPhone和Mac。 iPhone打开Web inspector（Settings->Safari->Advanced->Open the Web inspector），使用Safari浏览器打开iPhone进行调试。在Mac页面前端网络调试工具，打开Safari浏览器调试（菜单栏->开发->iPhone设备名称->选择调试页面），在弹出的Safari Developer Tools中调试

在没有 iPhone 的情况下在 Mac App Store 上安装 Xcode 以使用内置的 iOS 模拟器

Android使用USB线将手机连接到电脑。手机进入开发者模式，勾选USB调试，让调试电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices勾选发现USB设备选项手机允许远程调试并访问调试页面。点击电脑上的inspect按钮，进入调试页面。

直接用手机扫码查看

2.VConsole

- 日志：console.log|info|error|... - 网络：XMLHttpRequest、Fetch、sendBeacon - 元素：HTML 节点树 - 存储：Cookies、LocalStorage、SessionStorage - 手动执行 JS 命令行 - 自动定义插件 3.使用代理工具调试

原则：

以查尔斯为例：

安装Charles查看电脑IP和端口将IP和端口号填入手机HTTP代理Charles允许授权使用SwitchHosts！软件配置Mac电脑和Hosts手机访问开发环境页面

默认情况下，Charles 无法捕获 HTTPS 请求，需要安装许可证

四、常用代理工具 NodeJS调试 1.Inspector Protocol + Chrome Devtool

执行命令 node --inspect=8888 index.js