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