前端開發中的問題排查與定位：HTML、CSS、JavaScript（報錯的解決方式）

目錄

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>

調試方法：

  1. 打開瀏覽器開發者工具（按 F12）。

  2. 在 Elements 面板中查看頁面結構，注意 <p> 標簽的位置，它應該不在 <ul> 標簽內部。

  3. 你會發現瀏覽器自動對這個結構進行提示，發現問題后修復標簽嵌套。

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>

調試方法：

  1. 打開瀏覽器開發者工具（按 F12）。

  2. 在 Console 面板中，你會看到類似 Uncaught SyntaxError: Unexpected token 的錯誤提示，表示 src 屬性的值缺少引號。

  3. 修復錯誤：將 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>

調試方法：

  1. 打開瀏覽器開發者工具（按 F12），進入 Sources 面板。

  2. 在 Sources 面板中找到包含 JavaScript 代碼的文件，并在 createElement(null) 行設置一個斷點。

  3. 刷新頁面，代碼會在該斷點處暫停，查看變量狀態和調用棧，發現錯誤是 createElement(null) 造成的。

  4. 修復錯誤：將 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>

調試方法：

  1. 打開瀏覽器開發者工具（按 F12），進入 Network 面板。

  2. 刷新頁面，查看是否有 404 錯誤，顯示為 nonexistent-image.jpg 加載失敗。

  3. 修復錯誤：確保圖片路徑正確或使用有效的圖片 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>

調試方法：

  1. 打開瀏覽器開發者工具（按 F12），進入 Performance 面板。

  2. 點擊 “Record” 按鈕開始記錄頁面性能，然后刷新頁面，觀察 Frame Rate 和 CPU Usage，查看動畫是否影響性能。

  3. 如果你看到頁面性能下降（如幀率過低），可以優化動畫，減少每幀計算的復雜度，或使用 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>

調試方法：

  1. 打開開發者工具（F12）。

  2. 選擇 "元素" 面板，查看 .box 和 .box2 元素。

  3. 修改它們的 top 和 left 值，看看如何調整元素的位置。

  4. 通過盒模型面板查看它們的 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>

調試方法：

  1. 打開開發者工具，右鍵點擊 .box 元素，選擇 “檢查”。

  2. 在 “計算樣式” 面板中，查看 .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>

調試方法：

  1. 打開開發者工具，點擊設備圖標（手機圖標），進入 “設備模式”。

  2. 切換不同設備，查看 .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>

調試方法：

  1. 打開開發者工具，選擇 “元素” 面板，右側查看 “動畫” 面板。

  2. 你可以查看動畫的詳細信息，檢查是否按預期執行，調整動畫參數等。

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>

調試方法：

  1. 打開開發者工具，切換到 "控制臺"（Console）面板。

  2. 點擊按鈕時，你會看到控制臺輸出的信息，幫助你檢查程序邏輯是否符合預期。

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>

調試方法：

  1. 打開開發者工具，切換到 “源代碼”（Sources）面板。

  2. 在 calculate() 函數內的 let result = a + b; 這一行點擊設置斷點。

  3. 點擊按鈕時，瀏覽器會在該行暫停代碼執行，你可以逐步查看變量值、執行流程，并單步調試（通過點擊“逐步執行”按鈕或 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>

調試方法：

  1. 打開開發者工具，切換到 “網絡”（Network）面板。

  2. 點擊 “獲取數據” 按鈕發起請求。

  3. 在 “網絡” 面板中查看請求的詳細信息，包括請求的 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>

調試方法：

  1. 打開開發者工具，切換到 “控制臺”（Console）面板。

  2. 點擊按鈕時，控制臺會顯示 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>

調試方法：

  1. 打開開發者工具，切換到 “控制臺”（Console）面板。

  2. 點擊按鈕時，控制臺會顯示執行順序：

    • “開始異步任務”

    • “異步任務已經開始”

    • 等待 2 秒后，輸出 “異步任務完成”。

你可以通過控制臺輸出和斷點調試，檢查異步代碼的執行順序是否符合預期。

總結

通過使用瀏覽器的 控制臺、源代碼 面板、網絡 面板等工具，你可以有效地調試 JavaScript 代碼，定位常見的 邏輯錯誤、網絡請求問題、JavaScript 異常 等。你可以通過輸出日志、設置斷點、查看網絡請求等多種方法幫助你快速定位問題并解決。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/75156.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/75156.shtml
英文地址，請注明出處：http://en.pswp.cn/web/75156.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Spring MVC 重定向（Redirect）詳解

Spring MVC 重定向（Redirect）詳解

Spring MVC 重定向&#xff08;Redirect&#xff09;詳解 1. 核心概念與作用 重定向&#xff08;Redirect&#xff09; 是 Spring MVC 中一種客戶端重定向機制&#xff0c;通過 HTTP 302 狀態碼&#xff08;默認&#xff09;將用戶瀏覽器重定向到指定 URL。 主要用途&#xf…
閱讀更多...
《深入探秘：分布式軟總線自發現、自組網技術原理》

《深入探秘：分布式軟總線自發現、自組網技術原理》

在當今數字化浪潮中&#xff0c;分布式系統的發展日新月異&#xff0c;而分布式軟總線作為實現設備高效互聯的關鍵技術&#xff0c;其自發現與自組網功能宛如打開智能世界大門的鑰匙&#xff0c;為多設備協同工作奠定了堅實基礎。 分布式軟總線的重要地位 分布式軟總線是構建…
閱讀更多...
eplan許可證的用戶權限管理

eplan許可證的用戶權限管理

在電氣設計領域&#xff0c;EPLAN軟件以其強大的功能和靈活性而備受用戶青睞。然而&#xff0c;隨著企業規模的擴大和團隊人數的增加&#xff0c;如何確保軟件使用的安全與效率成為了一個重要的問題。EPLAN許可證的用戶權限管理功能為此提供了完美的解決方案。本文將詳細介紹EP…
閱讀更多...
pytorch小記（十七）：PyTorch 中的 `expand` 與 `repeat`：詳解廣播機制與復制行為（附詳細示例）

pytorch小記（十七）：PyTorch 中的 `expand` 與 `repeat`：詳解廣播機制與復制行為（附詳細示例）

pytorch小記&#xff08;十七&#xff09;&#xff1a;PyTorch 中的 expand 與 repeat&#xff1a;詳解廣播機制與復制行為&#xff08;附詳細示例&#xff09; &#x1f680; PyTorch 中的 expand 與 repeat&#xff1a;詳解廣播機制與復制行為&#xff08;附詳細示例&#xf…
閱讀更多...
Databricks: Why did your cluster disappear?

Databricks: Why did your cluster disappear?

You may found that you created a cluster many days ago, and you didnt delete it, but it is disapear. Why did this happen? Who deleted the cluster? Actually, 30 days after a compute is terminated, it is permanently deleted automaticlly. If your workspac…
閱讀更多...
C語言【輸出字符串中的大寫字母】

C語言【輸出字符串中的大寫字母】

題目 輸出字符串中的大寫字母 思路&#xff08;注意事項&#xff09; 純代碼 #include<stdio.h> #include<string.h>int main(){char str[20], ans[20];fgets(str, sizeof(str), stdin);str[strcspn(str, "\n")] \0;for (int i 0, j 0; i < strl…
閱讀更多...
基于隊列構建優先級搶占機制的LED燈框架設計與實現

基于隊列構建優先級搶占機制的LED燈框架設計與實現

文章目錄 前言一、LED 顯示框架概述1. 框架結構圖2. 基本機制 二、核心結構與接口設計1. 狀態命令結構2. 狀態項結構3. LED框架配置結構4. LED運行控制器 三、LED框架邏輯流程1. 初始化邏輯2. 優先級搶占判斷與處理邏輯3. 執行隊列命令并處理tick4. 隊列為空時的默認狀態回滾 四…
閱讀更多...
PyQt6實例_A股財報數據維護工具_解說并數據與完整代碼分享

PyQt6實例_A股財報數據維護工具_解說并數據與完整代碼分享

目錄 1 20250403之前的財報數據 2 整個項目代碼 3 工具使用方法 3.1 通過akshare下載 3.2 增量更新 3.3 查看當前數據情況 3.4 從數據庫中下載數據 視頻 1 20250403之前的財報數據 通過網盤分享的文件&#xff1a;財報三表數據20250403之前.7z 鏈接: https://pan.ba…
閱讀更多...
React 之 Redux 第三十一節 useDispatch() 和 useSelector()使用以及詳細案例

React 之 Redux 第三十一節 useDispatch() 和 useSelector()使用以及詳細案例

使用 Redux 實現購物車案例 由于 redux 5.0 已經將 createStore 廢棄&#xff0c;我們需要先將 reduxjs/toolkit 安裝一下&#xff1b; yarn add reduxjs/toolkit// 或者 npm install reduxjs/toolkit使用 vite 創建 React 項目時候 配置路徑別名 &#xff1a; // 第一種寫法…
閱讀更多...
Spring Boot 中集成 Knife4j：解決文件上傳不顯示文件域的問題

Spring Boot 中集成 Knife4j：解決文件上傳不顯示文件域的問題

Spring Boot 中集成 Knife4j&#xff1a;解決文件上傳不顯示文件域的問題 在使用 Knife4j 為 Spring Boot 項目生成 API 文檔時&#xff0c;開發者可能會遇到文件上傳功能不顯示文件域的問題。本文將詳細介紹如何解決這一問題&#xff0c;并提供完整的解決方案。 Knife4j官網…
閱讀更多...
OpenCV 圖形API（17）計算輸入矩陣 src 中每個元素的平方根函數sqrt()

OpenCV 圖形API（17）計算輸入矩陣 src 中每個元素的平方根函數sqrt()

操作系統&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 編程語言&#xff1a;C11 描述 計算數組元素的平方根。 cv::gapi::sqrt 函數計算每個輸入數組元素的平方根。對于多通道數組&#xff0c;每個通道會獨立處理。其精度大約與內置的 …
閱讀更多...
大學論文書寫規范與格式說明

大學論文書寫規范與格式說明

大學論文書寫規范與格式說明 （適用于人文社科、理工科通用框架） 一、論文整體結構 1. 基本組成部分 封面 包含論文標題、作者姓名、學院/專業、學號、指導教師、提交日期等（按學校模板填寫）。 中英文摘要 中文摘要：300~500字，概述研究背景、方法、結論與創新點，末尾附…
閱讀更多...
C# 串口通信

C# 串口通信

1. 導入 using System.IO.Ports;2. 初始化定義 SerialPort sp new SerialPort(); // 設置串口 sp.PortName "COM3"; // 串口 sp.BaudRate 9600; // 波特率 sp.Parity Parity.None; // 校驗位 sp.DataBits 8; // 數據位 sp.StopBits StopBits.One; // 停…
閱讀更多...
android14 keycode 上報 0 解決辦法

android14 keycode 上報 0 解決辦法

驅動改完后發現上報了keycode=0 04-07 13:02:33.201 2323 2662 D WindowManager: interceptKeyTq keycode=0 interactive=false keyguardActive=true policyFlags=2000000 04-07 13:02:33.458 2323 2662 D WindowManager: interceptKeyTq keycode=0 interactive=false key…
閱讀更多...
C++day9

C++day9

思維導圖 牛客練習 練習&#xff1a; 將我們寫的 myList 迭代器里面 operator[] 和 operator 配合異常再寫一遍 #include <iostream> #include <cstring> #include <cstdlib> #include <unistd.h> #include <sstream> #include <vector>…
閱讀更多...
批量合并多張 jpg/png 圖片為長圖或者 PDF 文件，支持按文件夾合并圖片

批量合并多張 jpg/png 圖片為長圖或者 PDF 文件，支持按文件夾合并圖片

我們經常會碰到需要將多張圖片拼成一張圖片的場景&#xff0c;比如將多張圖片拼成九宮格圖片&#xff0c;或者將多張圖片拼成一張長圖。還有可能會碰到需要將多張圖片合并成一個完整的 PDF 文件來方便我們進行打印或者傳輸等操作。那這些將圖片合并成一張圖片或者一個完整的文檔…
閱讀更多...
程序化廣告行業（73/89）：買賣雙方需求痛點及應對策略深度剖析

程序化廣告行業（73/89）：買賣雙方需求痛點及應對策略深度剖析

程序化廣告行業&#xff08;73/89&#xff09;&#xff1a;買賣雙方需求痛點及應對策略深度剖析 大家好&#xff01;一直以來&#xff0c;我都熱衷于在技術領域探索學習&#xff0c;也深知知識的分享能讓我們共同進步。寫這篇博客的目的&#xff0c;就是希望能和大家一起深入了…
閱讀更多...
[隨筆] nn.Embedding的前向傳播與反向傳播

[隨筆] nn.Embedding的前向傳播與反向傳播

nn.Embedding的前向傳播與反向傳播 nn.Embedding的前向計算過程 embedding module 的前向過程其實是一個索引&#xff08;查表&#xff09;的過程 表的形式是一個 matrix&#xff08;embedding.weight, learnable parameters&#xff09; matrix.shape: (v, h) v&#xff1a;…
閱讀更多...
構建實時、融合的湖倉一體數據分析平臺：基于 Delta Lake 與 Apache Iceberg

構建實時、融合的湖倉一體數據分析平臺：基于 Delta Lake 與 Apache Iceberg

1. 執行摘要 挑戰&#xff1a; 傳統數據倉庫在處理現代數據需求時面臨諸多限制&#xff0c;包括高昂的存儲和計算成本、處理海量多樣化數據的能力不足、以及數據從產生到可供分析的端到端延遲過高。同時&#xff0c;雖然數據湖提供了低成本、靈活的存儲&#xff0c;但往往缺乏…
閱讀更多...
Maven error：Could not transfer artifact

Maven error：Could not transfer artifact

問題描述 當項目從私有倉庫下載依賴時&#xff0c;Maven 報錯&#xff0c;無法從遠程倉庫下載指定的依賴包&#xff0c;錯誤信息如下&#xff1a; Could not transfer artifact com.ding.abcd:zabk-java:pom from/to releases (http://192.1122.101/repory/mavenleases/): 此…
閱讀更多...
最新文章

Copyright @ 2022~2023