关于开发调试

「动态修改元素和样式」

• 点击.cls 开启动态修改元素的 class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值（宇号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
• Computed 下点击样式里的箭头可以跳转到 style面板中的 css 规则

可以用以下 2种方式强制激活伪类

• 选中具有伪类的元素．点击 hov
• DOM 树右键菜单，选择 Force State

「Console」日志面板

• console.log
• console.warn
• console.erfor
• console.debug
• console.info
• console.table 具像化地展示JSON和数组数据
• 占位符 给日志添加样式，可以突出重要的信息（%s：字符串占位符；%o：对象占位符；%d：数字占位符）

面板的左侧可以选择等级，对日志进行分类查看

小技巧：不同类型的数据打印出来的颜色不同

「Sources」资源面板

最左侧：页面资源文件目录树

中间位置：代码预览区域

最右侧上方：Debug 工具栏

从左到右依次为

• 暂停（继续）
• 单步跳过
• 进入函数
• 跳出函数
• 单步执行
• 激活（关闭）所有断点
• 代码执行异常处自动 最右侧下方：断点调试器

source Map 可以映射源代码，mappings字段储存了源文件和Source Map的映射

「Performance」性能面板

从上到下依次为 控制面板

概览面板

• FPS：每秒帧数
• CPU：处理各个任务花费的时间
• NET：各个请求花费时间 线程面板
• Frames：帧线程
• Main：主线程，负费执行
• Javascript,解析HTML/CSS,完成绘制
• Raster：Raster线程，负责完成某个layer或者某些块(tile )的绘制 统计面板

「Network」请求面板

• 上方第一个区域：控制面板
• 上方第二个区域：过滤面板
• 概览区域：概览区域
• 左侧区域： Request Table 面板
• 左侧底部区域：总结面板
• 右侧区域：请求详情面板

「Application」面板

展示与本地储存相关的信息相关的信息

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie 点击左侧 Application 下的Stroage 面板中的 Clear Site Data可以清楚网页的本地存储数据

移动端 H5 调试

「真机调试」

iOS

• 1.使用 Lightning数据线将 iPhone 与Mac 相连
• 2.iPhone 开启Web检查器（设置 一 Safari 高级一＞开启Web检查器）
• 3.iPhone 使用 Safari 浏览器打开要调试的页面
• 4.Mac 打开 Safari 浏览器调试（菜单栏一＞开发iPhone 设备名一选择调试页面)
• 5.在弹出的 Safari Developer Tools 中调试

没有 iphone 设备可以在 Mac AppStore 安装 Xcode 使用其内置的 os模拟器

Android

• 1.使用USB 数据线将手机与电脑相连
• 2.手机进入开发者模式，勾选USB 调试，井允许调试
• 3. 电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/ #devices 并勾选Discover USB devices 选项
• 4. 手机允许远程调试，并访问调试页面
• 5.电脑点击 inspect 按钮
• 6. 进入调试界面 直接使用手机扫码查看，体验更佳

「使用代理工具调试」

原理 电脑作为代理服务器 手机通过 HTTP 代理连接到电脑 手机上的请求都经过代理服务器 默认情况下，Charles 无法抓取到 HTTPS 的请求，需要安装证书。

以 Charles 为例：

• 1.安装 Charles
• 2.查看电脑1 和端口
• 3.将1、端口号填入手机 HTTP 代理
• 4.Charles 允许授权
• 5.使用 SwitchHostsl 软件给 Mac 电脑配 Hosts
• 6.手机访问开发环境页面

「线上即时修改Overrides」

• 1.打开 Sources 面板下的的 Overrides
• 2.点击 Select folders for Overrides。 选择-个本地的空文件夹目录。
• 3.允许授权
• 4.在page 中修改代码，修改完成后command ＋s 保存
• 5.打开 devTools，点击有上角的三个小点
• ->More tools 一>Changes，就能看到所有修改了

常用的开发调试技巧

「利用代理解决开发阶段的跨域问题」

        ---请求--》                ---转发请求--》  
浏览器                  代理服务器                 真实服务器 
       <<--  转发响应--             《〈----响应