前端调试bug的方法

时间 2021-08-14

标签 javascript html java chrome 数组浏览器 markdown dom ide 函数栏目 JavaScript 繁體版

原文原文链接

一：断点调试（逻辑异常时使用）

在可能出错的位置设置断点
启动调试
单部执行（F10），观察变量的变化，将变量变化结果与预期结果进行比较，若是结果一致，则继续执行，若是不一致，可能出错。
找出出错位置，修改

使用方法：javascript

建立项目(下面的是笔者写的小demo)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>text:<span id="text">0</span></div>
	<button id="btn">text+1</button>
	<script type="text/javascript"> const textNode = document.getElementById('text'), btnNode = document.getElementById('btn'); btnNode.onclick = () => { textNode.innerHTML = (Number(textNode.innerHTML) + 2) } </script>
</body>
</html>

在你的项目页面按F12，页面效果以下：
html

咱们要实现的是+1但是如今的代码是加2是有问题的，咱们就在点击事件的那个函数设置断点。固然了。。。我这只有一句话的代码是没有必要设置断点的，一看代码就看到了我后面是+了2，而不是1，通常设置断点在循环或者递归语句当中用的较多，由于能够实时监视变量的变化。断点的使用可在回看文章开头。
当你设置完断点之后你再次触发你打断点的这个事件就能够看到变量的变化了。

console的注意事项

若是你用的是chrome浏览器开发，当你console变量的时候请注意一下：
若是你要console的是基本类型,好比：字符串，数字，布尔值等等能够直接的console，
可是若是你要是准备console引用类型，好比：对象，数组等就尽可能不要直接console，由于你直接console引用类型的话浏览器会帮你把后面求职的结果先console出来，可能你console的这里的这个object并非这样的，好比说你在后面对object的amount进行了+2的操做，你在前面的地方console出来的就是+2以后的结果，而不是当下的状态值。想要console出当下的状态值须要把它转变下类型，好比咱们JSON.stringify一下：console.log(JSON.stringify(object))这样就能够输出当下的object的状态值了。java

检测dom事件执行顺序

monitorEvents()chrome

CSS调试：

首先F12打开控制台
数组

或者直接右键你想要检查的内容：
然后选择检查：浏览器

前端调试bug的方法

一： 断点调试（逻辑异常时使用）

console的注意事项

检测dom事件执行顺序

CSS调试：

一：断点调试（逻辑异常时使用）