网站建设百度百科,米方科技网站建设,网页升级紧急通知在哪里看,内部网页制作文章目录前言PC web端一、 前端Debug的特点二、 前端Debug的方式1. 浏览器动态修改元素和样式2. Console3. Sorce Tab4. NetWork5. Application6. Performancee7. Lighthouse移动端调试IOSAndroid通过代理工具调试前言
仅以此文章记录学习。 PC web端
一、 前端Debug的特点
…
文章目录前言PC web端一、 前端Debug的特点二、 前端Debug的方式1. 浏览器动态修改元素和样式2. Console3. Sorce Tab4. NetWork5. Application6. Performancee7. Lighthouse移动端调试IOSAndroid通过代理工具调试前言
仅以此文章记录学习。 PC web端
一、 前端Debug的特点
多平台浏览器、Hybrid、NodeJs、小程序、桌面应用等.多环境本地开发环境、线上环境多工具Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole等多技巧Console、BreakPoint、sourceMap、代理等
二、 前端Debug的方式
1. 浏览器动态修改元素和样式
点击 .cls 开启动态修改元素的 class输入字符串可以动态的给元素添加类名勾选/取消类名可以动态的查看类名生效效果点击具体的样式值 (字号、颜色、宽度高度等)可以进行编辑浏览器内容区域实时预览Computed 下点击样式里的箭头可以跳转到 styles面板中的 css 规则 伪类强制激活的两种方式 选中具有伪类的元素点击:hovDOM 树右键菜单选择 Force State 2. Console
console.log输出一条信息console.warn输出警告信息信息最前面加一个黄色三角console.error输出错误信息到控制台console.debug输出“调试”级别的消息console.info输出一条信息console.table具像化的展示 JSON 和 数组数据console.dir通过类似文件树的方式展示对象的属性占位符给日志添加样式可以突出重要的信息%s: 字符串占位符%o: 对象占位符: %c: 样式占位符%d: 数字占位符 3. Sorce Tab
区域1: 页面资源文件目录树区域2: 代码预览区域区域3: Debug 工具栏 从左到右依次为 暂停 (继续)单步跳过进入函数跳出函数单步执行激活 (关闭) 所有断点代码执行异常处自动 区域4: 断点调试器 4. NetWork
区域1: 控制面板区域2: 过滤面板区域3: 概览区域区域4:Request Table 面板区域5: 总结面板区域6: 请求详情面板 5. Application
Application 面板展示与本地存储相关的信息
Local Storage 本地存储Session Storage 会话存储IndexedDBWeb SQLCookie
6. Performancee
可以通过这个工具去找到页面卡顿的原因
示例https://googlechrome.github.io/devtools-samples/jank/
7. Lighthouse
怎么说呢。。优化神器
移动端调试
IOS
使用 Lightning 数据线将 iPhone 与 Mac 相连iPhone 开启 Web 检查器 (设置- Safari -高级- 开启 Web 检查器)iPhone 使用 Safari 浏览器打开要调试的页面Mac 打开 Safari 浏览器调试 (菜单栏一开发iPhone 设备名- 选择调试页面)在弹出的 Safari Developer Tools 中调试 没有 iPhone 设备可以在 Mac Appstore 安装 Xcode 使用其内置的ios 模拟器 Android
使用 USB 数据线将手机与电脑相连手机进入开发者模式勾选 USB 调试并允许调试电脑打开 Chrome 浏览器在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项手机允许远程调试并访问调试页面电脑点击 inspect 按钮进入调试界面 直接使用手机扫码查看体验更佳 通过代理工具调试
原理:
电脑作为代理服务器手机通过 HTTP 代理连接到电脑手机上的请求都经过代理服务器
常用代理工具
Charles适合查看、控制网络请求,分析数据Fiddler与Charles类似,适合windows平台spy-debugger远程调试于机页面,抓包Whistle基于Node实现的跨平台Web 调试代理工具
