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

用户2161734947844
69 阅读3分钟

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

本堂课的主要内容

  1. Bug与Debug
  2. Chrome DevTools调试代码
  3. 移动端调试
  4. NodeJs调试

Bug与Debug

Bug的产生

Bug一词的原意是“昆虫”或“虫子”;而在电脑系统或程序中隐藏着的一些未被发现的缺陷或问题,人们也叫它“bug”。

image.png

前端Debug的特点

    1. 多平台
    • 浏览器、Hybrid、NodeJS、小程序、桌面应用等。
  • 02 多环境
    • 本地开发环境、线上环境
  • 03 多工具
    • Chrome devTools、 Charles、Spy-Debugger、Whistle、vConsole...
  • 04 多技巧
    • Console、BreakPoint、sourceMap、代理等

Chrome DevTools调试代码

Elements动态修改元素和样式

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

Console

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table
    • 具象化的展示JSON和数组数据
  • console.dir
    • 通过类似文件树的方式展示对象的属性
  • 占位符
    • 给日志添加样式，可以突出重要的信息%s:字符串占位符；%o:对象占位符；%c样式占位符；%d：数字占位符

Sorce Tab

image.png

image.png

  • 区域一
    • 页面资源文件目录树
  • 区域二
    • 代码预览区域
  • 区域三
    • Debug工具栏
    • 从左到右依次为
    • 暂停(继续)
    • 单步跳过
    • 进入函数
    • 跳出函数
    • 单步执行
    • 激活(关闭)所有断点
    • 代码执行异步处自动
  • 区域4
    • 断点调试器

Break Point 与 Watch

  • 使用关键词debugger或代码预览区的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标hover变量可以查看变量的值
  • 在调试器watch右侧点击 + 可以添加对变量的监控，查看该变量的值

移动端调试

真机调试

  • IOS

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

  • Android

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

NodeJS调试

const Koa = require('koa')
const app = new Koa()

app.use(async ctx => {
    cosnt time = new Date()
    
    console.tiem('tiem start')
    
    ctx.body = `hello, bytedance! ${time.toLocaleDateString()}`
    
    console.timeEnd('tiem end')
})

app.listen(8080, () =>{
    console.log('nodejs listening 8080')
})

VScode调试

  • VS Code 点击运行
  • 添加配置
  • 启动调试
  • 添加断点
  • 查看变量、堆栈

总结

通过这门课学到了很多种调试方法，还有很多种调试的代理工具。

avatar
文章
阅读
粉丝