前端调试笔记

一、PC端调试

Chrome DevTools

1-1、Elements

• Elements主要用于对页面元素样式的调试

  • .cls可以动态修改元素class
  • .hov或者鼠标右键一个元素并选择强制执行状态(Focus states)可以实现其伪类
  • Computed下点击样式里的箭头(箭头标识表示样式生效)可以跳转到styles面板中的css规则

1-2、Console

• 常见的console指令

  指令	描述
  console.log	打印普通日志
  console.warn	打印警告日志
  console.error	打印错误日志
  console.debug	打印调试日志
  console.info	打印信息日志
  console.table	具象化的展示JSON和数组数据
  console.dir	通过类似文件树的方式展示对象的属性
  占位符	给日志添加样式，可以突出重要信息。%s:字符串占位符 %o:对象占位符 %c：样式占位符 %d：数字占位符

  • 效果:

    • console.log与console.table（常用于打印JSON对象）

    • console.log与console.dir（以文件树的形式打印对象）

  • 技巧:

    • ①在日志中，不同类型的变量or值打印出来的颜色是不一样的。比如字符串就是黑白，而数字是蓝色

1-3、Sources

• Sources用于展示项目的源代码

**通常为了保证代码安全性，我们会对代码进行压缩以及混淆。最终上线的代码在Source中会变成如下图所示，那么对于这些被压缩混淆的代码我们要如何调试呢？ **=》是用SourceMap

1-4、Network

1-5、Application

• Application：展示浏览器存储相关的功能

1-6、Performance

• Performance：展示与网页性能相关内容

二、移动端调试

1、IOS或Android原生开发

1-1、IOS

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

1-2、Android

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

2、VConsole

• 在页面中注入该附件

3、代理工具调试

三、前端常用开发调试技巧

1、利用代理解决开发中的跨域问题

• 日常开发中我们通常是使用webpack并通过其中的devserve来解决跨域问题，然而这个devserve的原理其实就是通过nodejs来实现一个代理服务器再通过该代理服务器来解决跨域问题