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

欢莱
79 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第 5 天

浏览器检查

Elemnets

  • 调试伪类：Elemnets选择标签右击，Force state可强制设置元素状态（可选:hover等调试伪类样式）；或者Styles选 :hov 勾选 :hover
  • .cls 输入类名，可添加类名
  • Computed 在Filter处搜索样式属性，划上去点箭头，即可到达相应选择器
  • Elemnets选标签右击，选Capture node screenshot截此元素图

Console

  • 一侧打印日志；一侧是日志分类。
  • 根据日志颜色不同，区分不同类型
  • console.table(goods) 打印将goods数组以表格形式打出
  • console.dir(box1) 展示dom树的各属性
  • console.time()

Sources

  • 展示项目源代码

  • 一个区域是文件资源目录树、一个区域是代码预览区域、一个区域是Debug工具栏（从左到右为暂停、单步跳过、、、、），一个区域是断点调试器。

  • 进入暂停状态的方法：

    1、代码中加入 debugger，如

let a = 9;
debugger;
console.log(a)

image.png 进入检查，就会在此处设置断点，即暂停（可打印出断点前的代码日志（console语句））。点击image.png 程序即可继续执行。（检查页刷新即可又断点）

2、在源代码行号处，点击设置断点。断点会在Breakpoints框显示。

image.png

  • 显示变量的值，在source源码区域（有断点情况下），鼠标划上变量即可显示值，不需要console了。 也可在Watch栏添加变量，可显示当前状态变量的结果。
  • Scope查看作用域列表
  • Call stack 查看当前js的调用栈
  • XHR/fetch Breakpoints
  • DOM Breakpoints
  • ......

压缩后的代码如何调试？

前端代码天生具有“开源"属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后 的代码只有一行，变量使用'a'、'b' 等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?

使用 Source Map 映射 在 webpack.prod.js文件，在module.exports设置devtool: 'source-map'

压缩后代码文件后会写有 // #sourceMappingURL=bundle.js.map 意思是此文件的映射是bundle.js.map

既然Source Map可以映射源码，那压缩后的代码带上Source Map上线不就又不安全了吗?

打包后，有bundle.js.map，将bundle.js.map 放在其他平台，如监控平台。而不放在本项目，本项目的bundle.js.map文件删除即可。

NetWork

列表展示整个站点请求的各种资源。根据分类可选展示不同资源。

avatar
文章
阅读
粉丝