HTML5培訓(xùn)：調(diào)試HTML的技巧和方法

構(gòu)建幾乎任何一個(gè)Web項(xiàng)目時(shí)，調(diào)試HTML是不可避免的。調(diào)試部分是技術(shù)上的，一部分是直覺(jué)上的藝術(shù)形式，只能通過(guò)實(shí)踐來(lái)學(xué)習(xí)。隨著你構(gòu)建更多的項(xiàng)目，你在不同情況下嘗試的調(diào)試方法將變得更加明顯。想要獲得更多調(diào)試技巧，建議參加HTML5培訓(xùn)學(xué)習(xí)，有很多實(shí)踐課程可以學(xué)習(xí)調(diào)試技巧和方法。

檢查語(yǔ)法錯(cuò)誤

首先問(wèn)自己：“我是否漏掉了分號(hào)？我忘記關(guān)閉HTML元素了嗎？“不管你有多豐富的經(jīng)驗(yàn)，你還是會(huì)犯打字錯(cuò)誤。通常情況下，你可以簡(jiǎn)單地切換回文本編輯器，查看你最后編寫(xiě)的內(nèi)容，并解決問(wèn)題。

防止跨瀏覽器問(wèn)題

HTML和CSS中的大多數(shù)顯示問(wèn)題都來(lái)自于跨瀏覽器問(wèn)題。該網(wǎng)站在一個(gè)瀏覽器中看起來(lái)不錯(cuò)，但在另一個(gè)瀏覽器中存在問(wèn)題。在任何web項(xiàng)目中，這幾乎都是一個(gè)問(wèn)題，但是你可以通過(guò)首先防止許多跨瀏覽器問(wèn)題的發(fā)生，來(lái)最大限度地減少跨瀏覽器問(wèn)題的數(shù)量。通過(guò)HTML5培訓(xùn)課程，你可以在短時(shí)間內(nèi)學(xué)到真正有用的知識(shí)和技能，獲得快速提升。

首先，始終確保使用了良好的CSS重置，例如normalize。這將“消除”瀏覽器之間的不一致，并使它們的行為更加一致。即使你只是在做一個(gè)快速的單頁(yè)站點(diǎn)，而沒(méi)有使用CSS框架，你仍然應(yīng)該使用重置。

其次，檢查以確保你使用的HTML 元素和CSS 屬性確實(shí)受支持。HTML 和CSS 一直在發(fā)展，瀏覽器供應(yīng)商盡其所能跟上最新的標(biāo)準(zhǔn)。

使用Web Developer 繪制元素

調(diào)試時(shí)，在頁(yè)面上勾勒出元素的輪廓，以了解它們是如何相互關(guān)聯(lián)呈現(xiàn)的，這會(huì)很有幫助。你可以自己編寫(xiě)CSS來(lái)實(shí)現(xiàn)這一點(diǎn)，但更好的方法是使用適用于Chrome、Firefox和Opera的WebDeveloper瀏覽器擴(kuò)展。在HTML5培訓(xùn)學(xué)習(xí)中，專(zhuān)業(yè)講師面授指導(dǎo)教學(xué)，還有實(shí)操項(xiàng)目鍛煉學(xué)習(xí)，理論+實(shí)踐，雙管齊下，讓學(xué)習(xí)更科學(xué)，更有效。

WebDeveloper擴(kuò)展允許你根據(jù)不同的條件（如顯示類(lèi)型或元素類(lèi)型）概述元素。乍一看，這似乎微不足道，但在一個(gè)層疊聲明的復(fù)雜網(wǎng)絡(luò)中，很容易弄不清哪個(gè)元素最終得到了哪些屬性和值，這有助于捕獲惡意浮動(dòng)或混合顯示類(lèi)型。

檢查顯示類(lèi)型

網(wǎng)頁(yè)上的每個(gè)元素都有一個(gè)顯示類(lèi)型，例如inline、block、inline-block、table、flex、none等等。查看 MDN文檔顯示頁(yè)面以獲取完整列表。

調(diào)試是一種伴隨實(shí)踐而來(lái)的復(fù)雜的藝術(shù)形式，因此編寫(xiě)一份全面的指南幾乎是不可能的。但是，如果你想了解更多關(guān)于調(diào)試的信息，可以考慮參加HTML5培訓(xùn)，有實(shí)踐課程學(xué)習(xí)，可以學(xué)習(xí)更多調(diào)試方法。

了解更多

在前面的話

在此之前，我一直都在研究JavaScript相關(guān)的反調(diào)試技巧。但是當(dāng)我在網(wǎng)上搜索相關(guān)資料時(shí)，我發(fā)現(xiàn)網(wǎng)上并沒(méi)有多少關(guān)于這方面的文章，而且就算有也是非常不完整的那種。所以在這篇文章中，我打算跟大家總結(jié)一下關(guān)于JavaScript反調(diào)試技巧方面的內(nèi)容。值得一提的是，其中有些方法已經(jīng)被網(wǎng)絡(luò)犯罪分子廣泛應(yīng)用到惡意軟件之中了。

對(duì)于JavaScript來(lái)說(shuō)，你只需要花一點(diǎn)時(shí)間進(jìn)行調(diào)試和分析，你就能夠了解到JavaScript代碼段的功能邏輯。而我們所要討論的內(nèi)容，可以給那些想要分析你JavaScript代碼的人增加一定的難度。不過(guò)我們的技術(shù)跟代碼混淆無(wú)關(guān)，我們主要針對(duì)的是如何給代碼主動(dòng)調(diào)試增加困難。

本文所要介紹的技術(shù)方法大致如下：

1. 檢測(cè)未知的執(zhí)行環(huán)境（我們的代碼只想在瀏覽器中被執(zhí)行）；

2. 檢測(cè)調(diào)試工具（例如DevTools）；

3. 代碼完整性控制；

4. 流完整性控制；

5. 反模擬；

簡(jiǎn)而言之，如果我們檢測(cè)到了“不正常”的情況，程序的運(yùn)行流程將會(huì)改變，并跳轉(zhuǎn)到偽造的代碼塊，并“隱藏”真正的功能代碼。

一、函數(shù)重定義

這是一種最基本也是最常用的代碼反調(diào)試技術(shù)了。在JavaScript中，我們可以對(duì)用于收集信息的函數(shù)進(jìn)行重定義。比如說(shuō)，console.log()函數(shù)可以用來(lái)收集函數(shù)和變量等信息，并將其顯示在控制臺(tái)中。如果我們重新定義了這個(gè)函數(shù)，我們就可以修改它的行為，并隱藏特定信息或顯示偽造的信息。

我們可以直接在DevTools中運(yùn)行這個(gè)函數(shù)來(lái)了解其功能：

console.log("HelloWorld");

var fake = function() {};

window['console']['log']= fake;

console.log("Youcan't see me!");

運(yùn)行后我們將會(huì)看到：

VM48:1 Hello World

你會(huì)發(fā)現(xiàn)第二條信息并沒(méi)有顯示，因?yàn)槲覀冎匦露x了這個(gè)函數(shù)，即“禁用”了它原本的功能。但是我們也可以讓它顯示偽造的信息。比如說(shuō)這樣：

console.log("Normalfunction");

//First we save a reference to the original console.log function

var original = window['console']['log'];

//Next we create our fake function

//Basicly we check the argument and if match we call original function with otherparam.

// If there is no match pass the argument to the original function

var fake = function(argument) {

if (argument === "Ka0labs") {

original("Spoofed!");

} else {

original(argument);

}

// We redefine now console.log as our fake function

window['console']['log']= fake;

//Then we call console.log with any argument

console.log("Thisis unaltered");

//Now we should see other text in console different to "Ka0labs"

console.log("Ka0labs");

//Aaaand everything still OK

console.log("Byebye!");

如果一切正常的話：

Normal function

VM117:11 This is unaltered

VM117:9 Spoofed!

VM117:11 Bye bye!

實(shí)際上，為了控制代碼的執(zhí)行方式，我們還能夠以更加聰明的方式來(lái)修改函數(shù)的功能。比如說(shuō)，我們可以基于上述代碼來(lái)構(gòu)建一個(gè)代碼段，并重定義eval函數(shù)。我們可以把JavaScript代碼傳遞給eval函數(shù)，接下來(lái)代碼將會(huì)被計(jì)算并執(zhí)行。如果我們重定義了這個(gè)函數(shù)，我們就可以運(yùn)行不同的代碼了：

//Just a normal eval

eval("console.log('1337')");

//Now we repat the process...

var original = eval;

var fake = function(argument) {

// If the code to be evaluated contains1337...

if (argument.indexOf("1337") !==-1) {

// ... we just execute a different code

original("for (i = 0; i < 10;i++) { console.log(i);}");

}

else {

original(argument);

}

eval= fake;

eval("console.log('Weshould see this...')");

//Now we should see the execution of a for loop instead of what is expected

eval("console.log('Too1337 for you!')");

運(yùn)行結(jié)果如下：

1337

VM146:1We should see this…

VM147:10

VM147:11

VM147:12

VM147:13

VM147:14

VM147:15

VM147:16

VM147:17

VM147:18

VM147:19

正如之前所說(shuō)的那樣，雖然這種方法非常巧妙，但這也是一種非常基礎(chǔ)和常見(jiàn)的方法，所以比較容易被檢測(cè)到。

二、斷點(diǎn)

為了幫助我們了解代碼的功能，JavaScript調(diào)試工具（例如DevTools）都可以通過(guò)設(shè)置斷點(diǎn)的方式阻止腳本代碼執(zhí)行，而斷點(diǎn)也是代碼調(diào)試中最基本的了。

如果你研究過(guò)調(diào)試器或者x86架構(gòu)，你可能會(huì)比較熟悉0xCC指令。在JavaScript中，我們有一個(gè)名叫debugger的類(lèi)似指令。當(dāng)我們?cè)诖a中聲明了debugger函數(shù)后，腳本代碼將會(huì)在debugger指令這里停止運(yùn)行。比如說(shuō)：

console.log("Seeme!");

debugger;

console.log("Seeme!");

很多商業(yè)產(chǎn)品會(huì)在代碼中定義一個(gè)無(wú)限循環(huán)的debugger指令，不過(guò)某些瀏覽器會(huì)屏蔽這種代碼，而有些則不會(huì)。這種方法的主要目的就是讓那些想要調(diào)試你代碼的人感到厭煩，因?yàn)闊o(wú)限循環(huán)意味著代碼會(huì)不斷地彈出窗口來(lái)詢(xún)問(wèn)你是否要繼續(xù)運(yùn)行腳本代碼：

setTimeout(function(){while (true) {eval("debugger")

三、時(shí)間差異

這是一種從傳統(tǒng)反逆向技術(shù)那里借鑒過(guò)來(lái)的基于時(shí)間的反調(diào)試技巧。當(dāng)腳本在DevTools等工具環(huán)境下執(zhí)行時(shí)，運(yùn)行速度會(huì)非常慢（時(shí)間久），所以我們就可以根據(jù)運(yùn)行時(shí)間來(lái)判斷腳本當(dāng)前是否正在被調(diào)試。比如說(shuō)，我們可以通過(guò)測(cè)量代碼中兩個(gè)設(shè)置點(diǎn)之間的運(yùn)行時(shí)間，然后用這個(gè)值作為參考，如果運(yùn)行時(shí)間超過(guò)這個(gè)值，說(shuō)明腳本當(dāng)前在調(diào)試器中運(yùn)行。

演示代碼如下：

set Interval(function(){

var startTime = performance.now(), check,diff;

for (check = 0; check < 1000; check++){

console.log(check);

console.clear();

}

diff = performance.now() - startTime;

if (diff > 200){

alert("Debugger detected!");

}

},500);

四、DevTools檢測(cè)（Chrome）

這項(xiàng)技術(shù)利用的是div元素中的id屬性，當(dāng)div元素被發(fā)送至控制臺(tái)（例如console.log(div)）時(shí)，瀏覽器會(huì)自動(dòng)嘗試獲取其中的元素id。如果代碼在調(diào)用了console.log之后又調(diào)用了getter方法，說(shuō)明控制臺(tái)當(dāng)前正在運(yùn)行。

簡(jiǎn)單的概念驗(yàn)證代碼如下：

let div = document.createElement('div');

let loop = setInterval(() => {

console.log(div);

console.clear();

});

Object.defineProperty(div,"id", {get: () => {

clearInterval(loop);

alert("Dev Tools detected!");

}});

五、隱式流完整性控制

當(dāng)我們嘗試對(duì)代碼進(jìn)行反混淆處理時(shí)，我們首先會(huì)嘗試重命名某些函數(shù)或變量，但是在JavaScript中我們可以檢測(cè)函數(shù)名是否被修改過(guò)，或者說(shuō)我們可以直接通過(guò)堆棧跟蹤來(lái)獲取其原始名稱(chēng)或調(diào)用順序。

arguments.callee.caller可以幫助我們創(chuàng)建一個(gè)堆棧跟蹤來(lái)存儲(chǔ)之前執(zhí)行過(guò)的函數(shù)，演示代碼如下：

function getCallStack() {

var stack = "#", total = 0, fn =arguments.callee;

while ( (fn = fn.caller) ) {

stack = stack + "" +fn.name;

total++

}

return stack

}

function test1() {

console.log(getCallStack());

}

function test2() {

test1();

}

function test3() {

test2();

}

function test4() {

test3();

}

test4();

注意：源代碼的混淆程度越強(qiáng)，這個(gè)技術(shù)的效果就越好。

六、代理對(duì)象

代理對(duì)象是目前JavaScript中最有用的一個(gè)工具，這種對(duì)象可以幫助我們了解代碼中的其他對(duì)象，包括修改其行為以及觸發(fā)特定環(huán)境下的對(duì)象活動(dòng)。比如說(shuō)，我們可以創(chuàng)建一個(gè)嗲哩對(duì)象并跟蹤每一次document.createElemen調(diào)用，然后記錄下相關(guān)信息：

const handler = { // Our hook to keep the track

apply: function (target, thisArg, args){

console.log("Intercepted a call tocreateElement with args: " + args);

return target.apply(thisArg, args)

}

document.createElement= new Proxy(document.createElement, handler) // Create our proxy object withour hook ready to intercept

document.createElement('div');

接下來(lái)，我們可以在控制臺(tái)中記錄下相關(guān)參數(shù)和信息：

VM64:3 Intercepted a call to createElement with args: div

我們可以利用這些信息并通過(guò)攔截某些特定函數(shù)來(lái)調(diào)試代碼，但是本文的主要目的是為了介紹反調(diào)試技術(shù)，那么我們?nèi)绾螜z測(cè)“對(duì)方”是否使用了代理對(duì)象呢？其實(shí)這就是一場(chǎng)“貓抓老鼠”的游戲，比如說(shuō)，我們可以使用相同的代碼段，然后嘗試調(diào)用toString方法并捕獲異常：

//Call a "virgin" createElement:

try {

document.createElement.toString();

}catch(e){

console.log("I saw your proxy!");

}

信息如下：

"function createElement() { [native code] }"

S是解釋型語(yǔ)言，是逐條語(yǔ)句解釋執(zhí)行的，如果錯(cuò)誤發(fā)生在某個(gè)語(yǔ)句塊，此語(yǔ)句塊以前的語(yǔ)句一般都可以正常執(zhí)行。這不同于C等編譯型語(yǔ)言。

代碼調(diào)試的重點(diǎn)在于找到錯(cuò)誤發(fā)生點(diǎn)，然后才能有的放矢。

1 alert()

通常可以使用警告框來(lái)提示變量信息。

alert(document.body.innerHTML);

當(dāng)警告框彈出時(shí)，用戶(hù)將需要單擊“確定”來(lái)繼續(xù)。

2 html標(biāo)簽內(nèi)使用document.write()

<div id="demo">
    <script>
        var arr=[1,2,3,4,5]
        document.write(arr[2] + ' ') //3
    </script>
</div>

需要注意的是是，以下寫(xiě)法會(huì)替換整個(gè)頁(yè)面的內(nèi)容：

即使是函數(shù)調(diào)用也是如此。

3 innerHTML()

document.getElementById("demo").innerHTML =""

<h1>JavaScript Array.filter()</h1>

<p>使用通過(guò)測(cè)試的所有數(shù)組元素創(chuàng)建一個(gè)新數(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>

4 console()

JS的運(yùn)行環(huán)境是瀏覽器，由瀏覽器引擎解釋執(zhí)行JS代碼，一般來(lái)說(shuō)，瀏覽器也提供調(diào)試器，如chrome按F12即可調(diào)出高試器：

<!DOCTYPE html>
<html>
<body>
<h4>我的第一張網(wǎng)頁(yè)</h4>
<p>使用F12在瀏覽器（Chrome、IE、Firefox）中激活調(diào)試，然后在調(diào)試器菜單中選擇“控制臺(tái)”。</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)試器可打開(kāi)或關(guān)閉，強(qiáng)制將錯(cuò)誤報(bào)告給用戶(hù)。

通過(guò)調(diào)試器，您也可以設(shè)置斷點(diǎn)（代碼執(zhí)行被中斷的位置），并在代碼執(zhí)行時(shí)檢查變量。

5 try catch捕獲錯(cuò)誤

<p id="demo"></p>

<script>
try {
  adddlert("歡迎您，親愛(ài)的用戶(hù)！");
}
catch(err) {
  demo.innerHTML = err.message; //adddlert is not defined
}
</script>

JavaScript 實(shí)際上會(huì)創(chuàng)建帶有兩個(gè)屬性的 Error 對(duì)象：name 和 message。

name 設(shè)置或返回錯(cuò)誤名。

message 設(shè)置或返回錯(cuò)誤消息（一條字符串）。

6 debugger

debugger停止執(zhí)行 JavaScript，并調(diào)用調(diào)試函數(shù)（如果可用）。

7 注釋法或增量法

可以注釋掉一些可疑代碼來(lái)確定錯(cuò)誤發(fā)生點(diǎn)。

或者考慮逐步增加代碼的方法，逐步驗(yàn)證，以避免錯(cuò)誤。

8 一些常見(jiàn)的 JavaScript 錯(cuò)誤。

8.1 意外使用賦值運(yùn)算符

如果程序員在 if 語(yǔ)句中意外使用賦值運(yùn)算符（=）而不是比較運(yùn)算符（===），JavaScript 程序可能會(huì)產(chǎn)生一些無(wú)法預(yù)料的結(jié)果。

8.2 令人困惑的加法和級(jí)聯(lián)

加法用于加數(shù)值。

級(jí)聯(lián)（Concatenation）用于加字符串。

在 JavaScript 中，這兩種運(yùn)算均使用相同的 + 運(yùn)算符。

正因如此，將數(shù)字作為數(shù)值相加，與將數(shù)字作為字符串相加，將產(chǎn)生不同的結(jié)果：

var x = 10 + 5;          // x 中的結(jié)果是 15
var x = 10 + "5";         // x 中的結(jié)果是　"105"

而加法以外的其它算法運(yùn)算符可以將字符串進(jìn)行自動(dòng)類(lèi)型轉(zhuǎn)換。

10-"5" // 5

8.3 令人誤解的浮點(diǎn)數(shù)

JavaScript 中的數(shù)字均保存為 64 位的浮點(diǎn)數(shù)（Floats），符合IEEE754的標(biāo)準(zhǔn)。

所有編程語(yǔ)言，包括 JavaScript，都存在處理浮點(diǎn)值的困難：

var x = 0.1;
var y = 0.2;
var z = x + y             // z＝0.30000000000000004

8.4 錯(cuò)位的分號(hào)

因?yàn)橐粋€(gè)錯(cuò)誤的分號(hào)，此代碼塊無(wú)論 x 的值如何都會(huì)執(zhí)行：

if (x == 19);
{
     // code block
}

在一行的結(jié)尾自動(dòng)關(guān)閉語(yǔ)句是默認(rèn)的 JavaScript 行為。

在 JavaScript 中，用分號(hào)來(lái)關(guān)閉（結(jié)束）語(yǔ)句是可選的。

8.5 對(duì)象使用命名索引

在 JavaScript 中，數(shù)組使用數(shù)字索引。

在 JavaScript 中，對(duì)象使用命名索引。

如果您使用命名索引，那么在訪問(wèn)數(shù)組時(shí)，JavaScript 會(huì)將數(shù)組重新定義為標(biāo)準(zhǔn)對(duì)象。

<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 的類(lèi)型是 Undefined，Null的類(lèi)型是Object。

JavaScript 對(duì)象、變量、屬性和方法可以是未定義的。

此外，空的 JavaScript 對(duì)象的值可以為 null。

在測(cè)試非 null 之前，必須先測(cè)試未定義：

if (typeof myObj !== "undefined" && myObj !== null)

8.7 JS沒(méi)有塊作用域（與C語(yǔ)言不同）

在 ES2015 之前，JavaScript 只有兩種類(lèi)型的作用域：全局作用域和函數(shù)作用域。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript不會(huì)為每個(gè)代碼塊創(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 引入了兩個(gè)重要的 JavaScript 新關(guān)鍵詞：let 和 const。

這兩個(gè)關(guān)鍵字在 JavaScript 中提供了塊作用域（Block Scope）變量（和常量）。

for (let i = 0; i < 10; i++) {

  // some code

}

document.getElementById("demo").innerHTML = i; //不能訪問(wèn)

-End-

在線咨詢(xún)

上一篇：JAVA中List的遍歷方式
下一篇：給大伙支兩招，一鍵去網(wǎng)頁(yè)跳轉(zhuǎn)彈窗

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商