常用的调试技巧有哪些 ？

(1)Elements(dom元素和css元素调试)

image.png

在elements中,鼠标滑到哪个元素就可以在页面中看到相关选中效果,也可以点击左上角的箭头在页面中点击,可以看到点击元素在elements中的位置;选中后双击标签或属性即可修改;
而右边style就是css样式调试位置;双击即可修改样式;点击大括号最后一个样式的下面可以添加新样式;

(2)console(控制台下调试方法)

打开控制台在console下可以直接书写代码;
console.log 用于输出普通信息
console.info 用于输出提示性信息
console.count 统计代码被执行的次数
不止console语法,其他语法也可以

(3)source (资源页面的断点调试)

在source下通过打断点来看js的执行情况

image.png

右侧最上排分别是:暂停/继续 单步执行 单步跳入此执行行块
单步跳出此执行块;
在调试中如果发现要修改的地方可以在代码执行区域立即修改,修改后保存即可生效,这样就免去了再到代码中去书写了;

(4)post man(调试接口)

很多时候我们业务还没做到那块,后端接口就已经写好了,为了便于后期工作,不可能把每个请求代码都写到文件里编译好了再去浏览器内查看,所以事先在post man中可以先查看接口是否有效;使用方式是:选择请求方式,输入请求地址,填好请求参数即可