这是我参与「第五届青训营 」伴学笔记创作活动的第6天 一、前端开发调试PC端 1.1，chrome dev to ols 点击.cls开启动态修改元素的class输入字符串可以动态的给元素添加类名 勾选/取消类名可以动态的查看类名生效效果·点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览 .Computed下点击样式里的箭头可以跳转到sty面板中的css规则 可以用以下2种方式强制激活伪类选中具有伪类的元素，点击:hov DOM树右键菜单，选择Force State 1.2console console.table 具像化的展示JSON和数组数据 cobsole.dir 通过类似文件树的方式展示对象的属性 1.3sorce tab 添加断点进行调试 关键字debugger 或代码预览区域的行号可以设置断点 执行到断点处时代码暂停执行 度Breakpoints.列表可以r看断点列表，勾选/取消可以 激活/禁用对应断点 暂停状态下,鼠标hover变量可以查看变量的值 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值 scope可以看到代码对应的作用域 经过压缩后的代码可以通过 mappings字段存储了源文件和Source Map的映射 在打包时加入source map的映射，但是在项目上线前我们可以将source map从文件夹中移除，放到另一个位置保管，这样在代码出问题后依然可以进行定位调试，并且代码的安全性也有保证 1.4network面板 显示请求的页面，可以通过点击具体的请求来定位该请求发送错误的原因是后端还是前端，进而进行调试bug以及解决bug 1.5application Application面板展示与本地存储相关的信息 'Local StorageSession Storage·lndexedDB Cookie
