当前位置：首页 > wzjs >正文

阿里云要求的网站建设方案晋江网站开发

wzjs 2025/9/6 3:16:42

阿里云要求的网站建设方案,晋江网站开发,乐清新闻,wordpress销售由于图片和格式解析问题，可前往阅读原文 Chrome DevTools 是开发者用于调试 Web 应用程序、分析性能、检查元素和网络请求的重要工具。无论是前端开发人员还是后端工程师，熟练掌握 Chrome DevTools 都能显著提高开发效率和调试精度。通过 DevTools&…

由于图片和格式解析问题，可前往阅读原文

Chrome DevTools 是开发者用于调试 Web 应用程序、分析性能、检查元素和网络请求的重要工具。无论是前端开发人员还是后端工程师，熟练掌握 Chrome DevTools 都能显著提高开发效率和调试精度。通过 DevTools，我们可以快速识别并解决性能瓶颈、修复 bug、优化用户体验

Chrome DevTools 提供了多种强大的功能，包括但不限于：元素检查、网络调试、JavaScript 调试、性能分析、内存泄漏检测、日志查看等。通过这些功能，开发者可以实时查看页面结构、调试脚本、分析请求响应、监控应用状态，甚至在浏览器端进行模拟测试

:::warning 注意
本文只从JavaScript断点角度进行调试，其他方面如请求、性能、内存会以新的文章方式分享
:::

断点技巧

Chrome DevTools 提供了强大的断点调试功能，帮助开发者逐步执行代码，检查变量、查看调用堆栈，并实时观察代码的执行情况。以下是一些常用的 Chrome DevTools 断点调试技巧，帮助你更高效地定位问题

基本断点

通常开发时大家都喜欢console.log打印东西来看一些预期结果，你也可以通过在需要console的地方加上debugger来断住js，当执行到这里时，不仅可以看到你想要的信息，还可以看到当前作用域、变量、调用栈等一些信息，这样看起来更直观也更方便

// 假如有下面一段代码
button.addEventListener('click', clickCB);
function clickCB(e) {debugger;console.log(e);
}

条件断点

同样这里也是先在源码中指定位置debugger，或者如果你的源码并没有采取打包，源码好找的情况下可以直接在浏览器中找到对应的js文件直接打个条件注释断点就行

// 假如有下面一段代码 (当x<=0，断住)
const add = (x, y) => {x = 2 * x;return x + y;
}

DOM断点

DOM断点只能在浏览器中调试，有三种：

subtree modifications
attribute modifications
node removal

以上三种断点，也可用MutationObserverAPI来代替，方便配置使用灵活，官方文档

// 假如下面一段代码，当点击不同的按钮对ul进行增删改查，修改自身属性
<div class="domDebugger"><button>增加节点</button><button>删除节点</button><button>删除自己</button><button>更新子节点</button><button>更新子节点属性</button><button>更新当前元素属性</button>
</div>
<ul class="list"><li>1</li><li>2</li>
</ul><script>const dbtns = document.querySelectorAll('.domDebugger button');const list = document.querySelector('.list');dbtns[0].addEventListener('click', () => {const li = document.createElement('li');li.innerText = '新增的节点';list.appendChild(li);});dbtns[1].addEventListener('click', () => {list.removeChild(list.lastElementChild);});dbtns[2].addEventListener('click', () => {list.remove();});dbtns[3].addEventListener('click', () => {const li = document.createElement('li');li.innerText = '更新的节点';list.replaceChild(li, list.lastElementChild);});dbtns[4].addEventListener('click', () => {list.lastElementChild.setAttribute('class', 'li-class');});dbtns[5].addEventListener('click', () => {list.setAttribute('class', 'newclass');});
</script>

subtree modifications

节点监听:

当监听子节点变化时，只有当子节点(node)发生变化时，才会监听的到，如：子节点替换、子节点删除、子节点增加、子节点的字节点变化(像：文本节点、注释节点、元素节点等等都会监听的到)，但是节点的属性发生变化不会监听到

当点击上面的删除节点时就会被监听到，如上图；而当点击更新子节点属性或者当前元素属性时反而监听不到的

attribute modifications

属性监听:

监听当前元素属性发生变化时，而子节点属性变化监听不到;(想监听子节点的属性变化或者或者节点变化可以用开头提到的MutatorObserverAPI)

当点击更新当前元素属性时如下图所示，点击更新子节点属性不会监听到

node removal

这个只监听当前元素被删除，子几点的改变不会监听到，比较单一

当点击删除自己就会监听到

除了单独监听外，还可以同时监听三种类型，只要勾选上就行；除了这种调试，也可以通过前面提到的MutatorObserverAPI来调试

URL断点

添加对XHR的请求url的断点，当浏览器发起http请求时，如果断点的url包含请求url，就会打住断点

// 假如下面代码，点击按钮发起请求
const fetchApi = async () => {try {const rs = await fetch("http://localhost:3001/xxxx")const data = await rs.json()console.log(data)} catch(err) {console.log(err)}
}
const btn = document.querySelector('#btn');
btn.addEventListener('click', fetchApi)// ===== 服务代码 =====
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*');res.json({code: 200,message: 'Hello World',})
})
app.listen(port, () => {console.log(`Server is running on port ${port}`);
})

以上请求http://localhost:3001服务，现在我们在浏览器中添加对应的断点

事件监听断点

监听对应的事件当触发时就会打住断点，如：点击、鼠标、键盘事件等等

// 假如给一个元素绑定click、mouseover事件
// <div id="box" />
const target = document.querySelector("#box")
target.addEventListener("click", () => console.log('click...'))
target.addEventListener("mouseover", () => console.log('mouseover...'))

在浏览器上打上对应的断点

异常断点

异常断点可以在vscode中设置，如果抛出异常就会打住断点
添加vscode调试配置:

{"name": "Debugger Exception","request": "launch","type": "chrome","url": "http://localhost:5500","webRoot": "${workspaceFolder}/trandition"
}

在程序中直接抛出错误：

throw new Error('This is a test error');

调试React

React项目，用react-create-app启动项目，然后添加.vscode配置，点击debugger，在vscode中打个断点，就可以在vscode中调试代码了

{"name": "React","request": "launch","type": "chrome","url": "http://localhost:3000","webRoot": "${workspaceFolder}"
}

当点击对应的程序后打住断点：

调试Vue

目前用vite或者webpack生成的vue项目目前这样的都可以这样调试，以前的wepack要用sourcemap进行映射

{"name": "VueCli","request": "launch","type": "chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}",// 映射sourcemap"sourceMapPathOverrides": {// "webpack://?:*/*": "${workspaceFolder}/*"}
}