整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
為一名有著十多年經(jīng)驗(yàn)的前端工程師，我深知瀏覽器調(diào)試工具在日常開發(fā)中的重要性。它們不僅能幫助我們追蹤bug，優(yōu)化性能，還能提升我們的開發(fā)效率。在本文中，我將通過(guò)幾個(gè)實(shí)例詳細(xì)介紹如何使用瀏覽器的調(diào)試工具。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Console 示例</title>
</head>
<body>
<script>
// 輸出文本信息
console.log('這是一個(gè)普通的日志信息。');
// 輸出警告信息
console.warn('這是一個(gè)警告信息。');
// 輸出錯(cuò)誤信息
console.error('這是一個(gè)錯(cuò)誤信息。');
// 使用console.assert進(jìn)行斷言
console.assert(document.getElementById('myElement'), '元素不存在！');
</script>
</body>
</html>
在這個(gè)例子中，我們使用了console對(duì)象的不同方法來(lái)輸出信息。這些信息將直接顯示在瀏覽器的控制臺(tái)（Console）中，幫助我們進(jìn)行調(diào)試。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>斷點(diǎn)調(diào)試示例</title>
</head>
<body>
<button id="myButton">點(diǎn)擊我</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
var a=1;
var b=2;
var c=a + b;
console.log(c); // 在這里設(shè)置斷點(diǎn)
});
</script>
</body>
</html>
在這個(gè)例子中，我們可以在瀏覽器的開發(fā)者工具中的Sources標(biāo)簽頁(yè)設(shè)置斷點(diǎn)，當(dāng)點(diǎn)擊按鈕時(shí)，代碼執(zhí)行會(huì)在console.log(c);這一行暫停，我們可以查看變量a、b、c的值，單步執(zhí)行代碼，或者繼續(xù)執(zhí)行代碼。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS調(diào)試示例</title>
<style>
.my-element {
color: blue;
border: 1px solid black;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="my-element">我是一個(gè)可調(diào)試的元素</div>
<script>
// 這里可以添加JavaScript代碼，但本例主要演示CSS調(diào)試
</script>
</body>
</html>
在這個(gè)例子中，我們可以在瀏覽器的開發(fā)者工具中的Elements標(biāo)簽頁(yè)檢查.my-element類的樣式。我們可以實(shí)時(shí)修改其CSS屬性，比如顏色、邊框等，并立即在頁(yè)面上看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>性能分析示例</title>
</head>
<body>
<script>
performance.mark('start-loading');
// 假設(shè)這里有一些影響頁(yè)面加載的代碼
setTimeout(function() {
performance.mark('end-loading');
performance.measure('page-loading', 'start-loading', 'end-loading');
var performanceEntries=performance.getEntriesByType('measure');
performanceEntries.forEach(function(performanceEntry) {
console.log("頁(yè)面加載耗時(shí): " + performanceEntry.duration + "ms");
});
}, 1000);
</script>
</body>
</html>
在這個(gè)例子中，我們使用了performance API來(lái)標(biāo)記時(shí)間點(diǎn)，并測(cè)量頁(yè)面加載的耗時(shí)。通過(guò)瀏覽器的開發(fā)者工具中的Performance標(biāo)簽頁(yè)，我們可以記錄和分析頁(yè)面在不同階段的性能表現(xiàn)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>網(wǎng)絡(luò)請(qǐng)求分析示例</title>
</head>
<body>
<script>
fetch('https://api.example.com/data')
.then(response=> response.json())
.then(data=> console.log(data))
.catch(error=> console.error('請(qǐng)求失敗:', error));
</script>
</body>
</html>
在這個(gè)例子中，我們使用fetch API發(fā)起一個(gè)網(wǎng)絡(luò)請(qǐng)求。我們可以在瀏覽器的開發(fā)者工具中的Network標(biāo)簽頁(yè)查看這個(gè)請(qǐng)求的詳細(xì)信息，包括請(qǐng)求頭、響應(yīng)頭、響應(yīng)體等。
一陣子利用Balazor開發(fā)了一個(gè)NuGet站點(diǎn)，對(duì)WebAssembly進(jìn)行了初步的了解，覺得挺有意思。在接下來(lái)的一系列文章中，我們將通過(guò)實(shí)例演示的方式介紹WebAssembly的一些基本概念和編程模式。首先我們先來(lái)說(shuō)說(shuō)什么是WebAssembly，它主要幫助我們解決什么問(wèn)題。
本文演示實(shí)例下載：app1 app2
一、概述
二、WebAssembly程序(app.wat)
三、編譯生成app.wasm
四、JavaScript程序
五、跑起來(lái)看看
六、調(diào)用導(dǎo)出函數(shù)
WebAssembly可以視為一種采用精簡(jiǎn)的”二進(jìn)制格式”的“低等級(jí)”、“類匯編”語(yǔ)言。目前主流的瀏覽器均提供了對(duì)WebAssembly的支持，雖然WebAssembly的執(zhí)行性能（它能夠提供near-native的執(zhí)行性能）是JavaScript無(wú)法比擬的，但是在表達(dá)能力和靈活性還是不如JavaScript，所以WebAssembly的出現(xiàn)并不是要取代JavaScript，而是作為JavaScript的“助手”，兩者配合，各自發(fā)揮自身的優(yōu)勢(shì)，進(jìn)而開發(fā)出更高質(zhì)量的Web應(yīng)用。
與其說(shuō)WebAssembly像匯編，不如說(shuō)它更像MSIL，因?yàn)樗皇敲嫦蜷_發(fā)者的高級(jí)語(yǔ)言，而是高級(jí)語(yǔ)言的“編譯目標(biāo)”。雖然.NET 的運(yùn)行時(shí)CLR不能直接執(zhí)行C#、VB.NET和F#這樣的高級(jí)語(yǔ)言編寫的代碼，而執(zhí)行執(zhí)行MSIL指令，但是我們可以將前者編譯成后者。與之類似，我們也可以使用C、C++、C#、Rust和AssemblyScript（面向WebAssembly的TypeScript）作為開發(fā)語(yǔ)言，然后將代碼編譯成WebAssembly。
與匯編一樣，雖然WebAssembly采用的是單純的二進(jìn)制格式，但是可以轉(zhuǎn)換成文本形式。不僅如此，我們還可以按照這樣的文本格式來(lái)編寫程序（在接下來(lái)的內(nèi)容中，我們提供的WebAssembly程序均采用這樣的編寫方式），并利用相應(yīng)的工具將其編程成WebAssembly。WebAssembly文本采用一種名為S-expression的樹形結(jié)構(gòu)，我們定義的內(nèi)容都存在與一個(gè)具體的“節(jié)點(diǎn)”中，每個(gè)節(jié)點(diǎn)通過(guò)小括號(hào)包裹起來(lái)，子節(jié)點(diǎn)直接內(nèi)嵌于父節(jié)點(diǎn)中。由于模塊是WebAssembly的基本部署和加載單元，所以module總是它們的根節(jié)點(diǎn)，如下所示的就是一個(gè)合法的最簡(jiǎn)單的WebAssembly程序。
(module)
為了讓大家對(duì)WebAssembly文本的S-expression有一個(gè)大致的了解，我們采用這樣的形勢(shì)定義了一個(gè)進(jìn)行整數(shù)加法運(yùn)算的add函數(shù)。如下面的代碼片段所示，我們定義的函數(shù)通過(guò)內(nèi)嵌于module節(jié)點(diǎn)的(func)節(jié)點(diǎn)表示。它具有一些子節(jié)點(diǎn)，其中(export "add") 表示將這個(gè)函數(shù)以名稱“add”進(jìn)行導(dǎo)出，這意味著加載此模塊的JavaScript應(yīng)用可以直接調(diào)用此函數(shù)。額外三個(gè)節(jié)點(diǎn)(param $x i32) (param $y i32) (result i32)定義了函數(shù)的簽名，揭示了此函數(shù)包含兩個(gè)Int32(i32)的輸入?yún)?shù)，返回值（結(jié)果）的類型也是Int32(i32)。為了提供可讀性，同時(shí)也方面?zhèn)鲄⒎矫妫覀儗?shù)進(jìn)行了命名($x和$y)
(module
(func (export "add") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.add)
)
值得一提的是，WebAssembly僅僅支持4種數(shù)據(jù)類型，分別是32和64位的整數(shù)（i32和i64）和浮點(diǎn)數(shù)（f32和f64），連我們最常使用的字符串類型都不支持。由于字符串本質(zhì)上就是一組字符序列，而一個(gè)字符本質(zhì)上是采用某種編碼的一段字節(jié)序列，所以WebAssembly中針對(duì)字符串的處理需要自行解決編解碼的工作，所以直接以S-expression文本的形式編寫WebAssembly程序并不容易。
上面說(shuō)WebAssembly更像MSIL，還因?yàn)閳?zhí)行WebAssembly的VM是一個(gè)“堆棧機(jī)（Stack Machine）”,意味著它采用“壓棧”的方式傳遞參數(shù)。而匯編面向的是真正的機(jī)器語(yǔ)言，是“堆棧機(jī)（Stack Machine）”和“寄存器機(jī)（Register Machine）”的結(jié)合，不僅參數(shù)傳遞可以采用堆棧，也可以采用寄存器。這一點(diǎn)可以從add函數(shù)的實(shí)現(xiàn)看出來(lái)，由于最終需要執(zhí)行i32.add指令，我們需要在這之前調(diào)用local.get指令將兩個(gè)參數(shù)壓入棧中。i32.add執(zhí)行后的結(jié)果也將入棧，并成為函數(shù)返回值。
在對(duì)WebAssembly以及基于S-expression的文本形式有了基本了解之后，我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)演示一下一個(gè)WebAssembly程序大體上如何編寫，我們著重關(guān)注JavaScript應(yīng)用和WebAssembly之間的功能交互。我們創(chuàng)建一個(gè)空的目錄，并創(chuàng)建兩個(gè)文本文件app.wat和index.html，前者代表以S-expression文本形式編寫的WebAssembly程序，后者是一個(gè)空的HTML頁(yè)面，我們利用它提供的JavaScript程序加載并執(zhí)行編譯后的WebAssembly模塊。
如下所示的是app.wat的內(nèi)容，看起來(lái)很長(zhǎng)，好在我們現(xiàn)在對(duì)S-expression有了基本的了解，所以理解起來(lái)沒(méi)有什么問(wèn)題。模塊的第一個(gè)節(jié)點(diǎn)(func $print (import "js" "print") (param $op1 i32) (param $op2 i32) (param $op i32) (param $result i32))同樣是定義了一個(gè)函數(shù)，我們將其命名為$print， 子節(jié)點(diǎn)(import "js" "print") 表明該函數(shù)是從作為宿主的Javascript應(yīng)用中導(dǎo)入的，具體的路徑為js->print。如果導(dǎo)入的Javascript對(duì)象通過(guò)變量imports表示，意味著imports.js.print表示的就是這個(gè)導(dǎo)入的對(duì)象。至于其余的四個(gè)節(jié)點(diǎn)(param $op1 i32) (param $op2 i32) (param $op i32) (param $result i32))同樣是提供了函數(shù)的簽名：個(gè)i32類型的參數(shù)，分別表示第一個(gè)操作數(shù)、第二個(gè)操作數(shù)、操作符（1，2，3，4分別代表加、減、乘、除）和執(zhí)行結(jié)果。由于這個(gè)函數(shù)僅僅打印運(yùn)算表達(dá)式，所以沒(méi)有返回值。
(module
;; import js func print (op1, op2, op, result)
(func $print (import "js" "print")
(param $op1 i32)
(param $op2 i32)
(param $op i32)
(param $result i32))
;; int32 add (int32 x, int32 y)
(func $add (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.add)
;; int32 sub(int32 x, int32 y)
(func $sub (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.sub)
;; int32 mul(int32 x, int32 y)
(func $mul (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.mul)
;; int32 div(int32 x, int32 y)
(func $div (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.div_u)
(func $main
;; call print(1, 2, add(1,2), 1)
i32.const 1
i32.const 2
i32.const 1
i32.const 1
i32.const 2
call $add
call $print
;; call print(1, 2, sub(1,2), 2)
i32.const 1
i32.const 2
i32.const 2
i32.const 1
i32.const 2
call $sub
call $print
;; call print(1, 2, mul(1,2), 3)
i32.const 1
i32.const 2
i32.const 3
i32.const 1
i32.const 2
call $mul
call $print
;; call print(1, 2, div(1,2), 4)
i32.const 1
i32.const 2
i32.const 4
i32.const 1
i32.const 2
call $div
call $print
)
(start $main)
)
接下來(lái)我們定義了四個(gè)進(jìn)行加、減、乘和除運(yùn)算的函數(shù)add、sub、mul和div，它們與上面定義的add函數(shù)類似，不過(guò)由于缺少了（export “{funcname}”）節(jié)點(diǎn)，所以它們僅僅是四個(gè)內(nèi)部函數(shù)而已。接下來(lái)，我們定義了一個(gè)$main函數(shù)，它會(huì)傳入相同的參數(shù)（1、2）調(diào)用上述4個(gè)函數(shù)，并調(diào)用導(dǎo)入的print方法將包含結(jié)果的運(yùn)算表達(dá)式打印出來(lái)。雖然命名為$main，但是它也僅僅是一個(gè)普通的函數(shù)而已，所以我們需要利用(start $main)節(jié)點(diǎn)將其作為入口函數(shù)，這樣它就會(huì)在加載的時(shí)候自動(dòng)執(zhí)行了。
以文本形式編寫的WebAssembly程序需要編譯成二進(jìn)制模塊才能被加載執(zhí)行，這里我們使用的wat2wasm這個(gè)工具，這個(gè)工具可以從這里下載。除了將wat文件轉(zhuǎn)化成wasm文件的wat2wasm，下載包里還包含了其他一些有用的工具，比如進(jìn)行反向操作的wasm2wat。上面編寫的app.wat文件利用如下的命令就可以編譯生成WebAssembly目標(biāo)文件app.wasm。
wat2wasm app.wat -o app.wasm
如下所示的就是index.html文件的內(nèi)容，我們著重關(guān)注其提供的JavaScript代碼。我們首先定義被WebAssembly導(dǎo)入的用來(lái)輸出運(yùn)行表達(dá)式的函數(shù)print，然后按照導(dǎo)入路徑j(luò)s.print將其封裝到一個(gè)導(dǎo)入對(duì)象中（{"js":{"print":print}}）。我們調(diào)用WebAssembly.instantiateStreaming函數(shù)以異步方式加載app.wasm模塊，并創(chuàng)建對(duì)應(yīng)的實(shí)例。具體下載app.wasm模塊通過(guò)第一個(gè)參數(shù)提供的Promise（fetch("app.wasm")）完成，第二個(gè)參數(shù)代表導(dǎo)入對(duì)象。
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var url="app.wasm";
var print=(op1, op2, op, result)=> {
switch (op) {
case 1:
console.log(`${op1} + ${op2}=${result}`);
break;
case 2:
console.log(`${op1} - ${op2}=${result}`);
break;
case 3:
console.log(`${op1} * ${op2}=${result}`);
break;
case 4:
console.log(`${op1} / ${op2}=${result}`);
break;
default:
console.log("invalid operator.");
}
};
WebAssembly
.instantiateStreaming(fetch("app.wasm"),
{"js":{"print":print}});
</script>
</body>
</html>
我們采用相應(yīng)的方式將當(dāng)前目錄發(fā)布為本地web站點(diǎn)，比如執(zhí)行Python命令（python -m http.server），然后我們利用瀏覽器訪問(wèn)此站點(diǎn)的默認(rèn)文件index.html，瀏覽器的控制臺(tái)輸出就會(huì)看到WebAssembly模塊初始化輸出的四個(gè)運(yùn)算表達(dá)式。
上面我們演示了WebAssembly模塊在初始化的時(shí)候調(diào)用導(dǎo)入的JavaScript函數(shù)，現(xiàn)在我們來(lái)演示JavaScript應(yīng)用如何調(diào)用從WebAssembly導(dǎo)出的函數(shù)，為此我們將app.wat的代碼改寫成如下的形式，僅僅保留4個(gè)導(dǎo)出的函數(shù)add、sub、mul和div。
(module
(func (export "add") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.add)
(func (export "sub") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.sub)
(func (export "mul") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.mul)
(func (export "div") (param $x i32) (param $y i32) (result i32)
local.get $x
local.get $y
i32.div_u)
)
index.html中的Javascript代碼也做了如下的修改：我們?cè)谡{(diào)用WebAssembly.instantiateStreaming函數(shù)成功加載WebAssembly模塊并創(chuàng)建對(duì)應(yīng)模塊實(shí)例后，利用返回結(jié)果的instance屬性得到這個(gè)模塊實(shí)例。模塊導(dǎo)出的成員都保存在該實(shí)例的exports屬性返回的集合中，為此我們從中提取出導(dǎo)出的四個(gè)返回，并利用它們完成對(duì)應(yīng)的運(yùn)算后，調(diào)用console.log函數(shù)將包含結(jié)果的運(yùn)算表達(dá)式輸出到控制臺(tái)上。由于WebAssembly模塊不在需要調(diào)用導(dǎo)入的函數(shù)，所以調(diào)用instantiateStreaming函數(shù)的時(shí)候不需要在指定導(dǎo)入對(duì)象。
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var url="app.wasm";
WebAssembly
.instantiateStreaming(fetch("app.wasm"))
.then(result=> {
var exports=result.instance.exports;
var result=exports.add(1,2);
console.log(`1 + 2=${result}`);
result=exports.sub(1,2);
console.log(`1 - 2=${result}`);
result=exports.mul(1,2);
console.log(`1 * 2=${result}`);
result=exports.div(1,2);
console.log(`1 / 2=${result}`);
});
</script>
</body>
</html>
程序運(yùn)行之后，瀏覽器的控制臺(tái)上依然會(huì)輸出相同的結(jié)果。
來(lái)越多的網(wǎng)站制作者期望為自己的網(wǎng)站設(shè)計(jì)多種風(fēng)格，以便訪問(wèn)者能夠選擇自己喜歡的樣式進(jìn)行瀏覽，本文介紹的就是一個(gè)切換頁(yè)面樣式的解決方案。
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a=document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") !=-1 && a.getAttribute("title")) {
a.disabled=true;
if(a.getAttribute("title")==title) a.disabled=false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a=document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") !=-1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a=document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") !=-1
&& a.getAttribute("rel").indexOf("alt")==-1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date=new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires="; expires="+date.toGMTString();
}
else expires="";
document.cookie=name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ=name + "=";
var ca=document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c=ca[i];
while (c.charAt(0)==' ') c=c.substring(1,c.length);
if (c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload=function(e) {
var cookie=readCookie("style");
var title=cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload=function(e) {
var title=getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie=readCookie("style");
var title=cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
css 標(biāo)簽調(diào)用方式：
<link rel="stylesheet" type="text/css" href="css/white.css" title="white" />
<link rel="alternate stylesheet" type="text/css" href="css/black.css" title="black" />
切換方式：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
