一些前端调试技巧

看月亮的方源
91 阅读1分钟

1. 打开方式

进入所在的网页，右键点击检查，进入如图所示的页面

image.png

2.调试方法

  1. 拉伸侧边栏可以进行响应式布局的预览 image.png
  • 淡蓝色表示元素的本体部分，的空间占位。
  • 绿色表示padding,内边距。
  • 橙色的部分代表margin代表外边距的部分 image.png

  1. 冻结节点的hover,focus等

  2. 模拟弱网环境

image.png

  1. Chrome控制台打开后，按command + shift + p(苹果电脑) control + shift + p(windows系统)打开运行命令面板,进入相应的指令，就可以进行相应的操作。

image.png 案例：截图

  • 截取整个界面，方便用于汇报展示前端项目

image.png 截图效果如下：

image.png

  • 选择某个结点进行截图，对特定区域进行截图。

image.png

3 . 基于GPS和设备陀螺仪的交互

  1. 模拟自定义的GPS环境 image.png
  2. 面板下方的屏幕模拟器，可以通过拖动，来调试基于陀螺仪的交互， 并且可以直观的看到定轴上的旋转量。

image.png

4. 调试文案，可设置文档对象

调试文案，可设置文档对象，desigMode属性为on， 将整个文档设置为设计模式。可以快速修改文案，测试多行文字等场景

image.png

image.png

5. 拷贝和参考源码

  1. 复制页面代码 image.png
  2. 复制页面元素样式

image.png

6. 获取页面元素

  1. 获取匹配的Dom元素 image.png

  2. 获取节点的值，但每次变化都需要重新执行代码 image.png

  3. 实时监控元素 image.png

7. 验证元素的绑定事件，以及触发情况

使用monitorEvents监控事件

image.png

8. 直接在元素上设置断点

image.png

avatar
文章
阅读
粉丝