整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
S是解釋型語言，是逐條語句解釋執行的，如果錯誤發生在某個語句塊，此語句塊以前的語句一般都可以正常執行。這不同于C等編譯型語言。
代碼調試的重點在于找到錯誤發生點，然后才能有的放矢。
通常可以使用警告框來提示變量信息。
alert(document.body.innerHTML);
當警告框彈出時，用戶將需要單擊“確定”來繼續。
<div id="demo">
<script>
var arr=[1,2,3,4,5]
document.write(arr[2] + ' ') //3
</script>
</div>需要注意的是是，以下寫法會替換整個頁面的內容：
<button type="button" onclick="document.write(5 + 6)">試一試</button>
即使是函數調用也是如此。
document.getElementById("demo").innerHTML =""
<h1>JavaScript Array.filter()</h1>
<p>使用通過測試的所有數組元素創建一個新數組。</p>
<p id="demo"></p> //45,25
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
JS的運行環境是瀏覽器，由瀏覽器引擎解釋執行JS代碼，一般來說，瀏覽器也提供調試器，如chrome按F12即可調出高試器：
<!DOCTYPE html>
<html>
<body>
<h4>我的第一張網頁</h4>
<p>使用F12在瀏覽器（Chrome、IE、Firefox）中激活調試，然后在調試器菜單中選擇“控制臺”。</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>如果您的瀏覽器支持調試，那么您可以使用 console.log() 在調試窗口中顯示 JavaScript 的值：
內置的調試器可打開或關閉，強制將錯誤報告給用戶。
通過調試器，您也可以設置斷點（代碼執行被中斷的位置），并在代碼執行時檢查變量。
<p id="demo"></p>
<script>
try {
adddlert("歡迎您，親愛的用戶！");
}
catch(err) {
demo.innerHTML = err.message; //adddlert is not defined
}
</script>JavaScript 實際上會創建帶有兩個屬性的 Error 對象：name 和 message。
name 設置或返回錯誤名。
message 設置或返回錯誤消息（一條字符串）。
debugger停止執行 JavaScript，并調用調試函數（如果可用）。
可以注釋掉一些可疑代碼來確定錯誤發生點。
或者考慮逐步增加代碼的方法，逐步驗證，以避免錯誤。
8.1 意外使用賦值運算符
如果程序員在 if 語句中意外使用賦值運算符（=）而不是比較運算符（===），JavaScript 程序可能會產生一些無法預料的結果。
8.2 令人困惑的加法和級聯
加法用于加數值。
級聯（Concatenation）用于加字符串。
在 JavaScript 中，這兩種運算均使用相同的 + 運算符。
正因如此，將數字作為數值相加，與將數字作為字符串相加，將產生不同的結果：
var x = 10 + 5; // x 中的結果是 15
var x = 10 + "5"; // x 中的結果是 "105"而加法以外的其它算法運算符可以將字符串進行自動類型轉換。
10-"5" // 5
8.3 令人誤解的浮點數
JavaScript 中的數字均保存為 64 位的浮點數（Floats），符合IEEE754的標準。
所有編程語言，包括 JavaScript，都存在處理浮點值的困難：
var x = 0.1;
var y = 0.2;
var z = x + y // z＝0.300000000000000048.4 錯位的分號
因為一個錯誤的分號，此代碼塊無論 x 的值如何都會執行：
if (x == 19);
{
// code block
}在一行的結尾自動關閉語句是默認的 JavaScript 行為。
在 JavaScript 中，用分號來關閉（結束）語句是可選的。
8.5 對象使用命名索引
在 JavaScript 中，數組使用數字索引。
在 JavaScript 中，對象使用命名索引。
如果您使用命名索引，那么在訪問數組時，JavaScript 會將數組重新定義為標準對象。
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length; // person.length 將返回 0
var y = person[0]; // person[0] 將返回 undefined
y=person["age"]; //ok
y=person.age;//ok
document.getElementById("demo").innerHTML = y
</script>8.6 Undefined 不是 Null
Undefined 的類型是 Undefined，Null的類型是Object。
JavaScript 對象、變量、屬性和方法可以是未定義的。
此外，空的 JavaScript 對象的值可以為 null。
在測試非 null 之前，必須先測試未定義：
if (typeof myObj !== "undefined" && myObj !== null)
8.7 JS沒有塊作用域（與C語言不同）
在 ES2015 之前，JavaScript 只有兩種類型的作用域：全局作用域和函數作用域。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript不會為每個代碼塊創建新的作用域。</p>
<p>此代碼將顯示 i（10）的值，即使在 for 循環塊之外：</p>
<p id="demo"></p>
<script>
for (var i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i; //10
</script>
</body>
</html>ES2015 引入了兩個重要的 JavaScript 新關鍵詞：let 和 const。
這兩個關鍵字在 JavaScript 中提供了塊作用域（Block Scope）變量（和常量）。
for (let i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i; //不能訪問-End-
JavaScript中調試任何內容的最簡單方法之一是使用日志記錄console.log。但是控制臺提供了許多其他方法可以幫助您更好地進行調試。
先看一個簡單的示例，我們經常會使用打印一個對象的方式來調試這個對象的值，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JS</title>
</head>
<body>
<script>
const foo = { id: 1, verified: true, color: "藍色" };
const bar = { id: 2, verified: false, color: "紅色" };
console.log(foo);
console.log(bar);
</script>
</body>
</html>
這段代碼我們在進入頁面后，打印了兩個對象，這樣有一個很明顯的問題就是我們并不知道變量名，當然，你也可以在打印的時候帶上變量名，就像這樣
<script>
const foo = { id: 1, verified: true, color: "藍色" };
const bar = { id: 2, verified: false, color: "紅色" };
console.log("foo", foo);
console.log("bar", bar);
console.log({ foo, bar });
</script>
這兩種方式都可以，要么自己打印出來，要么組合成一個對象，而且大多數情況下我們也有可能就是這么干的，看下控制臺
缺點就是我們需要展開對象才能看到對象屬性的值。
除了console.log()我們還可以使用console.table(),我們來嘗試下
<script>
const foo = { id: 1, verified: true, color: "藍色" };
const bar = { id: 2, verified: false, color: "紅色" };
console.table({ foo, bar });
</script>
瀏覽器截圖如圖，控制臺輸出了一個表格和一個組合對象，這樣要比單純的console.log()直觀的多
如果你想要將相關詳細信息分組或嵌套在一起或者在函數中包含一些日志語句并且希望能夠清楚地看到與每個語句對應的范圍時，可以使用console.group（），示例代碼如下
<script>
console.group("用戶詳情：");
console.log("姓名: 孫悟空");
console.log("職業: 軟件開發工程師");
console.group("住址");
console.log("街道: 123 大唐路");
console.log("城市: 大唐");
console.groupEnd();
</script>
瀏覽器截圖如下
相當的直觀，雖然這樣的場景可能我們遇到的并不多，如果你想默認折疊這段信息，你可以使用groupCollapsed替代group。
根據具體情況，為了確保控制臺更具可讀性，可以使用console.warn()或console.error() 添加日志。console.info()在某些瀏覽器中還會顯示“i”圖標；
<script>
console.error("這是一error");
console.warn("這是一個warn");
console.info("這是一個info");
</script>
設置可以添加自定義樣式更進一步。可以使用%c指令將樣式添加到任何日志語句。這可以通過保持約定來區分API調用，用戶事件等。下面是一個例子：
<script> console.log( "%c Auth ", "color: white; background-color: #2274A5", "登錄也渲染了" ); console.log( "%c GraphQL ", "color: white; background-color: #95B46A", "獲取用戶詳情" ); console.log( "%c Error ", "color: white; background-color: #D33F49", "獲取用戶信息出錯" ); </script>
調試JavaScript程序時，有時需要打印函數調用的棧信息，這可以通過使用console.trace()來實現，示例如下：
<script>
function doTask() {
doSubTask(1000, 10000);
}
function doSubTask(countX, countY) {
for (var i = 0; i < countX; i++) {
for (var j = 0; j < countY; j++) {}
}
console.trace();
}
doTask();
</script>
如同其他語言的一些定時函數，我們可以使用console.time()來監視一段代碼執行的時間
<script>
let i = 0;
console.time("While");
while (i < 1000000) {
i++;
}
console.timeEnd("While");
console.time("For");
for (i = 0; i < 1000000; i++) {
// For Loop
}
console.timeEnd("For");
</script>
本文總結了一些在Web開發中常用的調試技巧，能讓我們在開發時如魚得水，希望對你有所幫助！
在我們的日常開發中我們常常會遇到JavaScript的調試問題，而我們解決問題的傳統解決方案就是使用大量的console.log或者console對象的其他方法，這會給我們帶來很多不便，特別是遇到復雜問題的時候，可能會出現大量的console.log，當排查出問題之后我們又不得不在回頭清除掉這些調試信息，這樣大大降低了我們的工作效率。所以，我們有必要尋找更好的方案來解決JavaScript的調試問題，無疑，Chrome的調試工具Chrome DevTools給我們帶來了調試的遍歷，下面我們一步步來學習一遍在DevTools中調試的基本工作流程！
我們通過一節簡單的案例來模擬一下，本案例來源于官網的調試Demo，其中index.html代碼如下
然后是index.js
代碼的本意是要做一個簡單的加法，但是我們運行看下結果：
顯然執行結果是錯誤的，結果應該是33，我們假設這就是我們在開發中遇到的問題
從左依次是
通常我們會在這寫console.log,打完斷點我們在填入兩個數字提交
我們的代碼在斷點處暫停了，很直觀的能看到我們需要看的變量值，簡單來說就是斷點可以快速方便的查看你想看的值，有時候我想單步調試代碼，直接F10就行了，想進入到函數中按F11，我們調試到這和我們猜想的一樣，由于是字符串那么+號就意味著連接，也就造成了錯誤的結果。
我認為這是最值得贊一波的功能，因為我們可以直接在控制臺輸入變量或者表達式或者執行一個函數,我們打開console標簽，輸入以下內容，前提是我們在之前那個地方打了斷點
我們可以執行我們需要執行的函數和表達式，然后也正確的看到了結果，知道的人可能覺得沒什么，但是不知道的人可能覺得這個功能非常Nice，或者你可以直接修改代碼保存后在執行，同樣知道了結果，而不必再到編輯器修改，調試正確后直接復制過去即可
本文就是想通過簡單的案例介紹來改變下我們傳統的js調試方式，目的就是為了提升工作效率，當然也有很多其它方式調試javascript，比如WebStorm，VSCode安裝Debug for Chrome，只是我覺得這種方式最直接，同時也最簡單，雖然是小技巧，但是也得知道不是，希望對大家能夠有所幫助！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
