别错过这些前端实用开发技能！

忘是亡心i 2023-02-21 06:40 33阅读 0赞

## 断点调试： ##

### 1.在逻辑代码中加入一行debugger ###

![在这里插入图片描述][20200629144716569.png]

即告诉浏览器将在此时开始断点  
![在这里插入图片描述][20200629145216312.png]  
在正在运行的项目中将会出现如下的标识  
![在这里插入图片描述][20200629145256403.png]

## 2.在浏览器的source界面增加下一个断点 ##

点击数字列左侧即可  
![在这里插入图片描述][20200629145453625.png]  
然后点击屏幕中出现paused in debugger的蓝色箭头让断点继续执行，  
此时在断点区域可以对某些数据，字段进行准确的读取，以此直观的展现出是否出现判断逻辑错误等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

## postman调试： ##

一般后台给到前端接口的时候，很多时候需要前端自己进行接口调试

如果成功发送一个请求：在浏览器中查看一下相应的属性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]  
在network-xhr-可以看到如请求地址，请求方式，请求头等信息

而参数就在最下面

可以直接取到相应格式的请求参数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]

## vue清除路由参数 ##

let path = this.$route.path; 
    this.$router.push(path);

[20200629144716569.png]: https://img-blog.csdnimg.cn/20200629144716569.png
[20200629145216312.png]: https://img-blog.csdnimg.cn/20200629145216312.png
[20200629145256403.png]: https://img-blog.csdnimg.cn/20200629145256403.png
[20200629145453625.png]: https://img-blog.csdnimg.cn/20200629145453625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629145641565.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200629165647663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200629171001896.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70