前端开发调试学习记录|青训营笔记

35 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

前端开发调试

一、PC端调试——Chrome DevTools

动态修改元素和样式

image.png

  • 点击 .cls开始动态修改元素的clss
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值 (字号、颜色、宽度高度等) 可以进行编辑,浏览器内容区域实时预览
  • Computed 下点击样式里的箭头可以跳转到 styles 面板中的 CSS 规则
  • 强行激活伪类的两种方式:
    • 选中具有伪类的元素,点击 :hov
    • DOM 树右键菜单,选择 Forces State

Console(控制台)

image.png 控制台是用来打印日志和输入命令行的。其中 console 命令有:

  • console.log() 是用来打印语句的
  • console.warn() 是用来打印警告的
  • console.error() 是用来打印错误的
  • console.info()
  • console.debug()
  • console.table() 是具象化的展示 JSON 和数组数据
  • console.dir() 通过类似文件树的方式展示对象的属性

还有一些占位符是给日志添加样式的,可以突出重要的信息,比如:%s 是字符串占位符、%o 是对象占位符、%d 是数字占位符。其中字符串的输出和数字的输出的颜色是不一样的,这有便于我们的分辨。
通过日志的输出,可以让我们轻易地找到日志输出的地方,从而对其进行修正或者处理。

Sorce Tab(资源栏)

image.png

  • 区域一:页面资源文件树
  • 区域二:代码预览区域
  • 区域三:Debug 工具栏
    • 监视(Watch):可以查看某个变量是什么值
    • 断点(Breakpoints):可以查看所有断点设置在什么位置,并且通过勾选的方式来确定是否取消该断点 在代码的预览当中,是可以将鼠标移动到某个值上,那么就会显示出该值的是什么类型。
      在 Debug 工具栏中是由断点调试功能的,在代码中输入debugger;就能设置断点,在运行的时候,就会在断点中暂停代码的运行,以便于我们检查断点前的代码的正确性。

压缩后的代码怎么调试?

出于安全考虑,上线之前 JavaScript 代码通常会被压缩,压缩前端代码天生具有“开源”属性,后的代码只有一行,变量使用“a、b等替换,整体变得不可阅读。为此,可以使用 Source Map 来进行调试。

移动端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 使用其内置的 ios模拟器

安卓端

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

总结

引用