前端阶段总结一 devtools 的使用

      不知不觉就做了一个月了，从完全的小白（不懂HTML/CSS/JS/VUE）到现在已经快完成第六个页面了，感觉还是进步挺快的。

     一开始都依葫芦画瓢，现在开始知道一些使用方法及意义了。 总结一下。

工欲善其事必先利其器，查找问题的能力在工作中是占有很大的作用的，可以快速定位问题然后去学习和找到问题，前端我用的是visual studio 来写code， 前端和后端有个很大的差别就是调试， 后端是直接在编译器打断点调试的，前端是在浏览器上。可以查看chrome DevTools的使用 

 先F12打开 DevTools

1.  如果想要给某一行打断点，先点sources 然后ctrl+p在搜索框输入你的vue文件名， 然后就可以打开你的文件了， 在对应的行点右键就有相应的功能了。

2.如果在debug过程中想查看某些变量的值，就可以停在断点的时候，切换到Console去，就可以动态的查看变量的值了。也可以在代码里调用console.log 写记录，就可以在这里查看到输出的值。