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

前端开发中的问题排查与定位：HTML、CSS、JavaScript（报错的解决方式）

news 来源：原创 2025/9/18 17:21:42

1.html

1. 结构错误调试：标签未正确嵌套

2. 语法问题调试：缺失引号

3. 断点调试：动态生成内容时的 JavaScript 错误

4. 网络调试：资源加载错误

5. 性能调试：页面加载性能

总结：

2.CSS

1. 定位布局问题：元素重叠或错位

调试方式：使用浏览器开发者工具中的 "元素" 面板

示例代码：

2. 调试 CSS 选择器

调试方式：使用开发者工具查看 “计算样式” 面板

示例代码：

3. 检查响应式布局问题

调试方式：使用开发者工具中的 “设备模式”

示例代码：

4. CSS 动画调试

调试方式：使用 “动画” 面板查看动画状态

示例代码：

3.javascript

1. Console 输出调试

调试方式：使用 console.log() 输出调试信息

示例代码：

2. 断点调试

调试方式：使用浏览器开发者工具的断点调试

示例代码：

3. 调试网络请求

调试方式：使用 “网络”（Network）面板调试网络请求

示例代码：

4. 捕获 JavaScript 错误

调试方式：使用 “控制台”（Console）面板查看 JavaScript 错误

示例代码：

5. 调试异步代码

调试方式：使用断点和日志输出调试异步代码

示例代码：

总结

我们把报错类型做个大分类分为HTML、CSS、JavaScript三大类

我写的每个调试方式代码都是htm 结构创建一个htm文件把代码复制进去就可以进行实践

1.html

1. 结构错误调试：标签未正确嵌套

这个示例包含一个嵌套错误，浏览器的开发者工具会自动高亮显示错误的 DOM 结构。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Structure Error Example</title>
</head>
<body><div><ul><li>Item 1</li><li>Item 2</li></ul></div><p>This paragraph is outside the div, but it’s inside the list (structure error).</p>
</body>
</html>

调试方法：

打开浏览器开发者工具（按 F12）。
在 Elements 面板中查看页面结构，注意 <p> 标签的位置，它应该不在 <ul> 标签内部。
你会发现浏览器自动对这个结构进行提示，发现问题后修复标签嵌套。

2. 语法问题调试：缺失引号

该示例包含一个属性值缺少引号的错误，这会在控制台中抛出语法错误。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Syntax Error Example</title>
</head>
<body><img src=missing-quotes.jpg alt="Missing Quotes">
</body>
</html>

调试方法：

打开浏览器开发者工具（按 F12）。
在 Console 面板中，你会看到类似 Uncaught SyntaxError: Unexpected token 的错误提示，表示 src 属性的值缺少引号。
修复错误：将 src=missing-quotes.jpg 改为 src="missing-quotes.jpg"。

3. 断点调试：动态生成内容时的 JavaScript 错误

该示例包含一个动态生成 HTML 内容的 JavaScript 错误，可以通过断点调试来定位问题。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Breakpoint Example</title>
</head>
<body><div id="container"></div><script>let container = document.getElementById("container");let itemCount = 5;for (let i = 0; i <= itemCount; i++) {let item = document.createElement("div");item.textContent = "Item " + i;container.appendChild(item);}// Introduce an error by passing null to createElement (we'll debug it)let wrongElement = document.createElement(null); // Error herewrongElement.textContent = "This will throw an error!";container.appendChild(wrongElement);</script>
</body>
</html>

调试方法：

打开浏览器开发者工具（按 F12），进入 Sources 面板。
在 Sources 面板中找到包含 JavaScript 代码的文件，并在 createElement(null) 行设置一个断点。
刷新页面，代码会在该断点处暂停，查看变量状态和调用栈，发现错误是 createElement(null) 造成的。
修复错误：将 createElement(null) 改为有效的元素类型（如 createElement("div")）。

4. 网络调试：资源加载错误

该示例模拟一个图片加载失败的场景，浏览器的开发者工具的 Network 面板会显示图片加载的 404 错误。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Network Error Example</title>
</head>
<body><h1>Image Loading Error Example</h1><img src="nonexistent-image.jpg" alt="Image Not Found">
</body>
</html>

调试方法：

打开浏览器开发者工具（按 F12），进入 Network 面板。
刷新页面，查看是否有 404 错误，显示为 nonexistent-image.jpg 加载失败。
修复错误：确保图片路径正确或使用有效的图片 URL。

5. 性能调试：页面加载性能

这个示例包含一个复杂的 JavaScript 动画，可能会影响页面加载性能。我们可以使用 Performance 面板来检查性能瓶颈。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Performance Test Example</title>
</head>
<body><div id="box" style="width: 100px; height: 100px; background-color: red;"></div><script>let box = document.getElementById("box");// Simulate an animation that could cause performance issueslet moveBox = () => {let pos = 0;let interval = setInterval(() => {if (pos >= 500) {clearInterval(interval);} else {pos += 10;box.style.transform = `translateX(${pos}px)`;}}, 16); // 60 frames per second};moveBox();</script>
</body>
</html>

调试方法：

打开浏览器开发者工具（按 F12），进入 Performance 面板。
点击 “Record” 按钮开始记录页面性能，然后刷新页面，观察 Frame Rate 和 CPU Usage，查看动画是否影响性能。
如果你看到页面性能下降（如帧率过低），可以优化动画，减少每帧计算的复杂度，或使用 requestAnimationFrame 替代 setInterval 来提高性能。

总结：

以上是五种常见的调试方法，每个例子都包含 HTML 代码和可以通过开发者工具调试和定位的错误。你可以通过打开浏览器的开发者工具（按 F12），使用 Elements, Console, Network, Sources, Performance 等面板来调试并修复代码中的问题。

2.CSS

1. 定位布局问题：元素重叠或错位

问题：网页元素可能重叠或者不按预期排列。常见原因是 定位属性、浮动问题 或 宽高设置不当。

调试方式：使用浏览器开发者工具中的 "元素" 面板

方法：

在浏览器开发者工具的 "元素" 面板中，你可以查看和修改页面中每个元素的 CSS 样式。
通过选择页面中的元素，查看它的盒模型（margin、border、padding、content）并且可以在右侧修改其 CSS 样式，看到效果立即反映在页面上。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 调试示例</title><style>.container {width: 500px;height: 300px;background-color: lightblue;position: relative;}.box {width: 200px;height: 200px;background-color: lightcoral;position: absolute;top: 50px;left: 50px;}/* 故意设置错位 */.box2 {width: 200px;height: 200px;background-color: lightgreen;position: absolute;top: 100px;left: 100px;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box2"></div></div>
</body>
</html>

调试方法：

打开开发者工具（F12）。
选择 "元素" 面板，查看 .box 和 .box2 元素。
修改它们的 top 和 left 值，看看如何调整元素的位置。
通过盒模型面板查看它们的 margin、border 和 padding 是否影响布局。

2. 调试 CSS 选择器

问题：有时 CSS 样式没有生效，可能是选择器不够具体或被其他样式覆盖。

调试方式：使用开发者工具查看 “计算样式” 面板

方法：

在 “元素” 面板中，选择一个元素后，切换到右侧的 “计算样式”（Computed Styles）面板，查看该元素的最终计算样式。
你可以看到哪些样式被应用，哪些被覆盖。通过查看 “被覆盖的样式”，可以帮助定位问题。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 调试示例</title><style>/* 更具体的选择器 */.container .box {background-color: lightblue;}/* 一般的选择器 */.box {background-color: lightcoral;}</style>
</head>
<body><div class="container"><div class="box">这是一个盒子</div></div>
</body>
</html>

调试方法：

打开开发者工具，右键点击 .box 元素，选择 “检查”。
在 “计算样式” 面板中，查看 .box 元素的样式，看看是否 .container .box 的样式覆盖了 .box 的样式。

3. 检查响应式布局问题

问题：响应式设计没有正常工作，页面在不同尺寸下显示不一致。

调试方式：使用开发者工具中的 “设备模式”

方法：

在开发者工具中，点击左上角的设备图标，开启 “设备模式”。
你可以选择不同的设备尺寸，模拟不同设备的屏幕宽度和高度，查看网页的响应式效果。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式布局示例</title><style>body {font-family: Arial, sans-serif;}.container {display: flex;flex-wrap: wrap;}.box {width: 100%;padding: 20px;margin: 10px;background-color: lightblue;box-sizing: border-box;}@media (min-width: 600px) {.box {width: 48%;}}@media (min-width: 900px) {.box {width: 30%;}}</style>
</head>
<body><div class="container"><div class="box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div></div>
</body>
</html>

调试方法：

打开开发者工具，点击设备图标（手机图标），进入 “设备模式”。
切换不同设备，查看 .box 元素是否根据屏幕宽度变化布局。

4. CSS 动画调试

问题：CSS 动画效果没有按预期执行。

调试方式：使用 “动画” 面板查看动画状态

方法：

在开发者工具的 “元素” 面板中，选择一个包含动画的元素。
然后切换到 “动画” 面板，你可以看到正在运行的动画，并可以暂停、恢复、查看每一帧的状态。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式布局示例</title><style>body {font-family: Arial, sans-serif;}.container {display: flex;flex-wrap: wrap;}.box {width: 100%;padding: 20px;margin: 10px;background-color: lightblue;box-sizing: border-box;}@media (min-width: 600px) {.box {width: 48%;}}@media (min-width: 900px) {.box {width: 30%;}}</style>
</head>
<body><div class="container"><div class="box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div></div>
</body>
</html>

调试方法：

打开开发者工具，选择 “元素” 面板，右侧查看 “动画” 面板。
你可以查看动画的详细信息，检查是否按预期执行，调整动画参数等。

3.javascript

1. Console 输出调试

问题：JavaScript 代码执行不符合预期，可以通过输出 console.log() 来查看变量值、函数调用过程等。

调试方式：使用 `console.log()` 输出调试信息

方法：

在代码中插入 console.log() 来输出调试信息，这样可以快速检查变量的值和程序执行的状态。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Console Debug 示例</title>
</head>
<body><button id="btn">点击我</button><script>document.getElementById('btn').addEventListener('click', function() {let a = 5;let b = 10;console.log("a 和 b 的初始值：", a, b);let result = a + b;console.log("计算结果：", result);if(result > 10) {console.log("结果大于10");} else {console.log("结果小于或等于10");}});</script>
</body>
</html>

调试方法：

打开开发者工具，切换到 "控制台"（Console）面板。
点击按钮时，你会看到控制台输出的信息，帮助你检查程序逻辑是否符合预期。

2. 断点调试

问题：代码执行过程中需要逐步检查变量和程序执行的顺序。

调试方式：使用浏览器开发者工具的断点调试

方法：

在 “源代码”（Sources）面板中设置断点，逐行调试 JavaScript 代码，查看每个步骤的变量值和执行流程。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>断点调试示例</title>
</head>
<body><button id="btn">点击我</button><script>function calculate(a, b) {let result = a + b;console.log("结果：", result);return result;}document.getElementById('btn').addEventListener('click', function() {let a = 10;let b = 20;let sum = calculate(a, b);console.log("最终结果：", sum);});</script>
</body>
</html>

调试方法：

打开开发者工具，切换到 “源代码”（Sources）面板。
在 calculate() 函数内的 let result = a + b; 这一行点击设置断点。
点击按钮时，浏览器会在该行暂停代码执行，你可以逐步查看变量值、执行流程，并单步调试（通过点击“逐步执行”按钮或 F10）。

3. 调试网络请求

问题：需要调试 API 请求，查看请求和响应数据是否正确。

调试方式：使用 “网络”（Network）面板调试网络请求

方法：

在浏览器的 “网络”（Network）面板中，查看网络请求的详情，包括请求头、响应数据、状态码等。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网络请求调试示例</title>
</head>
<body><button id="fetchData">获取数据</button><script>document.getElementById('fetchData').addEventListener('click', function() {fetch('https://jsonplaceholder.typicode.com/todos/1').then(response => response.json()).then(data => console.log('返回数据：', data)).catch(error => console.error('请求错误：', error));});</script>
</body>
</html>

调试方法：

打开开发者工具，切换到 “网络”（Network）面板。
点击 “获取数据” 按钮发起请求。
在 “网络” 面板中查看请求的详细信息，包括请求的 URL、响应的内容、状态码等。你可以查看请求是否成功（200 状态码）、返回的数据内容等。

4. 捕获 JavaScript 错误

问题：代码中有 JavaScript 错误，无法正常执行。

调试方式：使用 “控制台”（Console）面板查看 JavaScript 错误

方法：

如果 JavaScript 中发生了错误，浏览器会在 “控制台”（Console）面板中显示错误信息，包括错误类型、行号和错误描述。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript 错误调试示例</title>
</head>
<body><button id="errorBtn">触发错误</button><script>document.getElementById('errorBtn').addEventListener('click', function() {let a = undefined;console.log(a.length); // 这里会报错，因为 a 是 undefined});</script>
</body>
</html>

调试方法：

打开开发者工具，切换到 “控制台”（Console）面板。
点击按钮时，控制台会显示 TypeError: Cannot read property 'length' of undefined 错误。你可以根据错误信息定位问题，查看是哪行代码导致的问题，并检查变量 a 是否为 undefined。

5. 调试异步代码

问题：异步代码（如 setTimeout、Promise）的执行顺序不符合预期。

调试方式：使用断点和日志输出调试异步代码

方法：

对于异步代码，可以通过 console.log() 打印日志，或设置断点查看代码的执行顺序。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>异步调试示例</title>
</head>
<body><button id="asyncBtn">执行异步任务</button><script>document.getElementById('asyncBtn').addEventListener('click', function() {console.log('开始异步任务');setTimeout(function() {console.log('异步任务完成');}, 2000);console.log('异步任务已经开始');});</script>
</body>
</html>

调试方法：

打开开发者工具，切换到 “控制台”（Console）面板。
点击按钮时，控制台会显示执行顺序：
- “开始异步任务”
- “异步任务已经开始”
- 等待 2 秒后，输出 “异步任务完成”。

你可以通过控制台输出和断点调试，检查异步代码的执行顺序是否符合预期。

总结

通过使用浏览器的 控制台、源代码 面板、网络面板等工具，你可以有效地调试 JavaScript 代码，定位常见的 逻辑错误、网络请求问题、JavaScript 异常 等。你可以通过输出日志、设置断点、查看网络请求等多种方法帮助你快速定位问题并解决。

前端开发中的问题排查与定位：HTML、CSS、JavaScript（报错的解决方式）

目录 1.html 1. 结构错误调试：标签未正确嵌套 2. 语法问题调试：缺失引号 3. 断点调试：动态生成内容时的 JavaScript 错误 4. 网络调试：资源加载错误 5. 性能调试：页面加载性能总结： 2.CSS 1. 定位…...

编程日记 2025/9/18 17:21:42

VMware Fusion Pro 13 for Mac虚拟机

VMware Fusion Pro 13 for Mac虚拟机文章目录 VMware Fusion Pro 13 for Mac虚拟机一、介绍二、效果下载一、介绍 VMware Fusion Pro for Mac，是一款mac虚拟机软件，跟Parallels Desktop一样，都可以让你的 Mac 同时运行一个或多个不同的操作…...

编程日记 2025/9/19 13:50:17

使用cline(VSCode插件)、continue（IDEA插件）、cherry-studio玩转MCP

安装环境 uv（python） 为什么不用pip？ 使用 uv 时无需进行特定安装。使用 uvx 直接运行。 ⚡️ 比pip快10-100x https://github.com/pypa/pip https://ossinsight.io/analyze/pypa/pip?vsastral-sh%2Fuv#overview 安装 https://github…...

编程日记 2025/9/17 21:25:42

Kotlin FragmentTransaction多容器管理多个fragment

在Activity中管理五个Fragment的切换显示和隐藏，并且希望将这部分逻辑进行封装。之前已经教过他们如何在Kotlin中使用FragmentTransaction进行基本的添加、隐藏、显示和替换操作，现在需要进一步封装这些操作，提高代码的可维护性和复用性。管…...

编程日记 2025/9/17 20:45:39

PyCharm显示主菜单和工具栏

显示主菜单新版 PyCharm 是不显示主菜单的，要想显示主菜单和工具栏，则通过 “视图” → “外观” ，勾选 “在单独的工具栏中显示主菜单” 和 “工具栏” 即可。设置工具栏此时工具栏里并没有什么工具，因此我们需要自定义工具…...

编程日记 2025/9/18 8:06:06

WebView2最低支持.NET frame4.5,win7系统

WebView2最低支持.NET frame什么版本 ‌WebView2 对 .NET Framework 的最低版本要求‌ ‌基础支持范围‌ WebView2 官方支持的 .NET Framework ‌最低版本为 4.5‌，同时兼容 ‌.NET Core 3.0‌ 及以上版本‌18。对于 WPF、WinForms 等桌面应用开发，需确…...

编程日记 2025/9/14 20:46:19

ClickOnce 部署

1、在远程服务器172.16.9.252共享文件文件夹Bluetooth. 2、设置版本自动更新. 3、设置部署 4、设置创建桌面菜单二、远程发布IIS即可...

编程日记 2025/9/19 11:39:53

Kotlin 中集合 Collection 的扩展方法完全指南

Kotlin 中 Collection 的扩展方法完全指南 “代码是最美的诗篇”——本文将带你进入 Kotlin 集合扩展函数的世界，帮助你写出既高效又优雅的代码 🚀 一、引言 🤔 在 Android 开发中，集合（Collection）的操作…...

编程日记 2025/9/18 11:59:02

STM32F407使用ESP8266连接阿里云并上传数据

文章目录前言一、ESP01S介绍1.ESP01S2.MQTT固件烧录3.WIFI连接二、阿里云平台介绍1.创建产品及添加设备2.连接云平台三、数据上报四、命令下发五、完整工程前言在实现OTA功能我们必须学会如何连接云平台，本文会仔细介绍使用STM32F407和ESP8266连接阿里云平台&…...

编程日记 2025/9/16 3:22:53

TorchServe部署模型-index_to_name.json

在TorchServe部署模型时，若要将模型输出结果映射到指定标签（如分类任务的类别名称），需通过index_to_name.json文件定义索引与标签的映射关系，并在打包模型时将其作为额外文件包含。以下是完整流程和命令示例&#xff1…...

编程日记 2025/9/16 17:55:48

每日一题——BMN3 小红炸砖块

“落下”操作只会对y轴有影响，所以注意y轴的变化即可只要给出的坐标有砖块，就遍历查找他的上面是否有砖块，每一层都是这样，直到到没有砖块的那一层； 注意：定义矩阵时要注意，给出的坐标都是大…...

编程日记 2025/9/18 23:24:13

AWS服务器磁盘空间升级到100G后，怎么使其生效？

在AWS（Amazon Web Services）上扩展EBS（Elastic Block Store）卷的大小后，服务器操作系统并不会自动识别新增的空间。要使操作系统识别并使用新增的磁盘空间，您需要进行一些额外的步骤。以下是详细的指导和说…...

编程日记 2025/9/17 13:48:03

AWS弹性容器服务（AWS Elastic Container Service，ECS）概述

李升伟编译标签：AWS | ECS | 容器 | Docker AWS弹性容器服务（AWS Elastic Container Service，ECS）简介 AWS弹性容器服务（ECS）是一项完全托管的容器编排服务，支持运行、管理和扩展容器化应用…...

编程日记 2025/9/18 8:54:02

【消息队列kafka_中间件】一、快速入门分布式消息队列

在当今大数据和分布式系统盛行的时代，消息队列作为一种关键的中间件技术，发挥着举足轻重的作用。其中，Apache Kafka 以其卓越的性能、高可扩展性和强大的功能，成为众多企业构建分布式应用的首选消息队列解决方案。本篇文章将带你深…...

编程日记 2025/9/17 16:24:13

【Axure元件分享】移动端滑动拨盘地区级联选择器

在移动端产品设计中，地区级联选择器（省/市/区）是用户信息录入场景的核心组件，尤其在电商收货地址、政务信息填报等高频业务中直接影响表单转化率。本文将介绍一款基于Axure的三级动态联动机型地区选择器，通过仿真级联滚…...

编程日记 2025/9/19 12:03:18

宁德时代25年校招演绎数字推理SHL测评题库题型及真题分析

非常感谢您对宁德时代的关注。祝贺您通过宁德时代校园招聘的专业面试环节，现邀请您参与完成以下测评。本轮共两份测评，每份测评对您的最终结果都非常重要，请务必在收到测评后48小时内完成!本测评需要进行远程监考，如果您无法或不愿…...

编程日记 2025/9/17 5:21:25

Python-Django+vue宠物服务管理系统功能说明

❥(^_-) 上千个精美定制模板，各类成品Java、Python、PHP、Android毕设项目，欢迎咨询。 ❥(^_-) 程序开发、技术解答、代码讲解、文档，💖文末获取源码+数据库+文档💖 💖软件下载 | 实战案例 💖文章底部二维码，可以联系获取软件下载链接，及项目演示视频。本项目…...

编程日记 2025/9/18 22:44:17

洛谷普及B3691 [语言月赛202212] 狠狠地切割(Easy Version)

题目：[语言月赛202212] 狠狠地切割(Easy Version) 题号：B3691 难度：普及一末尾包含对二分法优化的详细解释题目分析最后一句应该是本题的考查关键，关于筛选算法的时间优化， 但从功能理论上，我找到了…...

编程日记 2025/9/19 0:22:17

FPGA_BD Block Design学习（一）

PS端开发流程详细步骤 1.第一步：打开Vivado软件，创建或打开一个工程。 2.第二步：在Block Design中添加arm核心，并将其配置为IP核。 3.第三步：配置arm核心的外设信息，如DDR接口、时钟频率、UART接口等。 …...

编程日记 2025/9/17 11:42:15

Collection vs Collections：核心区别与面试指南

Collection vs Collections：核心区别与面试指南一、本质区别（核心记忆点） 维度CollectionCollections身份集合框架的根接口操作集合的工具类包位置java.utiljava.util是否可实例化❌ 接口✅ 类（但构造器私有，不可实…...

编程日记 2025/9/9 3:01:06

sqlite3基本语句

创建表 CREATE TABLE student ( id INTEGER PRIMARY KEY, -- 学号，主键 name TEXT NOT NULL, -- 姓名，不能为空 age INTEGER, -- 年龄 gender TEXT -- 性别 ); SQLite常用数据类型主键 …...

编程日记 2025/9/18 22:49:53

jupyter notebook 显示conda虚拟环境

使用 nb_conda_kernels 安装 nb_conda_kernels：这个包可以自动从你的 Conda 环境中发现并列出内核。 conda activate base # 确保你在 base 环境或任何其他环境中安装 conda install nb_conda_kernels显示jupyternotebook当前所在的位置。...

编程日记 2025/9/17 15:12:00

华为海思IC前端中后端(COTXPU)岗位笔试机考题

近期华为海思即将开始IC设计实现实习岗位机考。小编今天给大家分享下华为海思相关机考题目。华为海思2025届校招笔试面试经验分享每年IC秋招笔试其实也是从题库中随机抽出一些题。华为海思2025届校招笔试面试经验分享华为海思机考主要分三个方向，分别是物理方向…...

编程日记 2025/9/18 18:12:28

HarmonyOS NEXT 实现滑动拼图验证码功能

大家好，我是 V 哥。在 Gitee 上看到一个用 Java 实现的 HarmonyOS 滑动拼图验证码功能，已经太老了，鸿蒙开发推荐使用 ArkTS 语言，V 哥来改造一下。以下是基于 ArkTS 的实现方案。由于鸿蒙系统的特性差异，这里提供核…...

编程日记 2025/9/19 4:33:35

【XML基础-1】深入理解XML：介绍、语法规则与实际应用

XML（可扩展标记语言）作为数据表示和交换的标准格式，自1998年问世以来已成为现代计算领域不可或缺的一部分。本文将全面介绍XML的基础概念、详细语法规则以及它在各领域中的实际应用。 1. 什么是XML？ XML（eXtensible …...

编程日记 2025/9/18 5:10:29

STM32 HAL库扩大USB CDC的输入缓冲区

STM32 HAL库，使用USB, 扩大输入暂存区的方法使用STM32的USB通讯CubeMX建立配置Serial Wire时钟配置USB配置时钟频率设置代码编写运行效果总结使用STM32的USB通讯 STM32可以不用使用串口转换直接和USB通讯。这给串口调试提供了极大的方便。编程，我使用了STM32CubeIDE编程。这…...

编程日记 2025/9/16 1:10:57

迭代器模式深度解析与实战案例

一、模式定义迭代器模式（Iterator Pattern） 是一种行为设计模式，提供一种方法顺序访问聚合对象的元素，无需暴露其底层表示。核心思想是将遍历逻辑从聚合对象中分离，实现遍历与存储的解耦。二、核心组件组件作用…...

编程日记 2025/9/18 19:42:38

Kotlin协程实用模版合集

目录 ✅ Kotlin 协程实用模板合集（适合 Android 项目） 📦 1. 基础挂起函数封装（Repository 层） ⚙️ 2. ViewModel 中使用协程状态处理 ⏱️ 3. 带超时控制的挂起操作 🤝 4. 并发请求合并&#xff0…...

编程日记 2025/9/19 13:18:09

基于Flask的Windows事件ID查询系统开发实践

基于Flask的Windows事件ID查询系统开发实践一、项目背景与功能概述 Windows操作系统的事件日志系统记录了数百种不同的事件ID，每个ID对应特定的系统事件。本文介绍如何构建一个基于Web的事件ID查询系统，主要实现以下功能： 数据可视化展示…...

编程日记 2025/9/15 19:15:52

机器人编程基础---C语言中的运算符

C语言中的运算符算术运算符关系运算符逻辑运算符位运算符C语言提供了多种运算符来执行不同的操作。算术运算符 + 加法- 减法* 乘法/ 除法% 取模（求余）++ 自增-- 自减int a = 10, b = 5; int sum = a + b;...

编程日记 2025/9/18 6:15:47

设计模式之迭代器模式：遍历的艺术与实现

引言迭代器模式（Iterator Pattern）是一种行为型设计模式，它提供了一种顺序访问聚合对象中各个元素的方法，而又不暴露其底层实现。迭代器模式将遍历逻辑与聚合对象解耦，使得我们可以用统一的方式处理不同的集合结构。…...

编程日记 2025/9/16 6:32:34

React七案例中

代码下载地图找房模块顶部导航栏封装NavHeader组件实现城市选择，地图找房页面的复用，在 components 目录中创建组件 NavHeader，把之前城市列表写过的样式复制到 NavHeader.scss 下，在该组件中封装 antd-mobile 组件库中的 N…...

编程日记 2025/9/19 4:19:04

消息中间件篇——RabbitMQ，Kafka

RabbitMQ 如何保证消息不丢失？ 生产者确认机制消息持久化消费者确认机制 RabbitMQ如何保证消息不丢失？ RabbitMQ的重复消费问题如何解决？ RabbitMQ中死信交换机（RabbitMQ延迟队列有了解过吗？） 延迟队列…...

编程日记 2025/9/16 19:31:07

HOW - 实现 useClickOutside 或者 useClickAway

场景在开发过程中经常遇到需要点击除某div范围之外的区域触发回调：比如点击 dialog 外部区域关闭。手动实现 import { useEffect } from "react"/*** A custom hook to detect clicks outside a specified element.* param ref - A React ref object…...

编程日记 2025/9/16 22:10:36

青少年编程考试 CCF GESP Python七级认证真题 2025年3月

Python 七级 2025 年 03 月题号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 答案 B C A B B A A B C A B B A B A 1 单选题（每题 2 分，共 30 分） 第 1 题下列哪个选项是python中的关键字？ A. function B. class C. method D. object…...

编程日记 2025/9/17 10:51:22

兆讯MH2103系列pin to pin替代STM32F103，并且性能超越

MH2103 是一款高性能的 32 位微控制器，由兆讯恒达推出，主要用于替代 STM32F103 系列产品。以下是关于 MH2103 芯片的详细介绍： 技术规格内核与主频： 采用高性能 32 位 Cortex-M3 内核，最高工作频率可达 216 MHz。支…...

编程日记 2025/9/18 4:50:21

h5使用dsBridge与原生app通信--桥方法

dsBridge是一个轻量级的 JS 和原生 App 的通信桥梁库,使用起来比原生方便不少支持： 1.H5 调用 Native 方法（JS → Native） 2.Native 调用 H5 方法（Native → JS） 3.支持参数传递和异步回调 4.支持 Android、iOS、以…...

编程日记 2025/9/10 0:44:43

package.json配置项积累

peerDependencies 用途：peerDependencies 主要用于声明一个包在其宿主项目中期望安装的依赖版本。它通常用于确保插件或库与特定版本的其他库兼容。行为： 在 npm v7之前，如果宿主项目未安装 peerDependencies 中列出的依赖，则不…...

编程日记 2025/9/18 13:35:47

Python安装软件包报错 fatal error: Python.h: No such file or directory

Python安装软件包报错 fatal error: Python.h: No such file or directory Failed to import transformers.integrations.integration_utils because of the following error (look up to see its traceback): Failed to import transformers.modeling_utils because of the f…...

编程日记 2025/9/14 1:19:38

1.html

1. 结构错误调试：标签未正确嵌套

2. 语法问题调试：缺失引号

3. 断点调试：动态生成内容时的 JavaScript 错误

4. 网络调试：资源加载错误

5. 性能调试：页面加载性能

总结：

2.CSS

1. 定位布局问题：元素重叠或错位

调试方式：使用浏览器开发者工具中的 "元素" 面板

示例代码：

2. 调试 CSS 选择器

调试方式：使用开发者工具查看 “计算样式” 面板

示例代码：

3. 检查响应式布局问题

调试方式：使用开发者工具中的 “设备模式”

示例代码：

4. CSS 动画调试

调试方式：使用 “动画” 面板查看动画状态

示例代码：

3.javascript

1. Console 输出调试

调试方式：使用 console.log() 输出调试信息

示例代码：

2. 断点调试

调试方式：使用浏览器开发者工具的 断点 调试

示例代码：

3. 调试网络请求

调试方式：使用 “网络”（Network）面板调试网络请求

示例代码：

4. 捕获 JavaScript 错误

调试方式：使用 “控制台”（Console）面板查看 JavaScript 错误

示例代码：

5. 调试异步代码

调试方式：使用 断点 和 日志输出 调试异步代码

示例代码：

总结

相关文章：

调试方式：使用 `console.log()` 输出调试信息

调试方式：使用浏览器开发者工具的断点调试

调试方式：使用断点和日志输出调试异步代码