端開發中，經常需要調試代碼，所以各種調試工具及瀏覽器控制臺的使用會對開發起到很大的作用。下面對目前很受喜歡的Chrome開發者工具進行介紹。Chrome開發者工具是一套內嵌到Chrome瀏覽器的Web開發工具和調試工具，只要安裝了Chrome 瀏覽器，就可以使用。

在Chrome瀏覽器中,開發者工具的打開方式主要有以下幾種。

·按“F12”鍵。

·按“Ctrl + Shift +I”組合鍵。

·右擊頁面的任意位置，選擇快捷菜單中的“檢查”命令。

·單擊 Chrome瀏覽器右上角的自定義圖標，展開菜單，選擇“更多工具”→“開發者工具”命令，如下圖所示。

打開開發者工具后，會看到有許多標簽的面板,如下圖所示。

上圖中，比較常用的是Elements、Console、Sources和Network這4個面板，接下來一一為讀者介紹其使用方式。

1、Elements面板

Elements面板即元素面板，使用該面板可以直接操作DOM元素和樣式，包括查看元素屬性或者修改元素屬性、修改樣式等，非常方便開發者調試HTML結構和CSS樣式，頁面效果如圖所示。

在上圖，選中 Elements面板，左側欄會顯示頁面的 DOM結構，右側欄顯示對應的選中節點樣式以及標準盒模型,可以方便查看頁面任意內容的寬、高等屬性。

在Elements面板中無論修改HTML結構還是CSS代碼，修改以后的效果都會實時同步到頁面中。例如，修改當前選中的標簽的 width屬性為500 px，頁面中的div寬度就會發生變化,同時右側欄中該元素的盒模型值也會更新。

2. Console面板

Console面板即控制臺面板，使用該面板不僅可以輸出開發過程中的日志信息，而且可以直接編寫代碼，作為與JavaScript進行交互的 Shell命令行，頁面效果如下圖所示。

在Console面板可直接定義函數并調用。另外,除了在Console面板中直接定義代碼,使用JavaScript中注入的Console對象中的常用方法，也可以快速顯示頁面中元素的信息。

值得一提的是，在Console面板中編寫代碼時，按“Shif+Enter”組合鍵可以實現代碼的換行。

3. Sources面板

Sources面板即源代碼面板，如果在工作區打開本地文件，可以實時編輯代碼，并支持斷點調試，如下圖所示。

在下圖中，打開JavaScript文件，單擊代碼前面的編號計可以設詈斷占進行調試,例如單擊代碼序號137和141，設置的所有斷點都會顯示在右側的Breaknoints斷點區。

然后重新刷新頁面,即可看到設置斷點位置的代碼運行情況。

4.Network面板

Network面板即網絡面板，用于記錄頁面上網絡請求的詳情信息，根據它可進行網絡性能優化，打開擴展的Network面板，查看所有請求的運行狀況，頁面效果如圖所示。

用 Windows 自帶的 MSAA 發現瀏覽器窗口，自動執行 JavaScript 很簡單！

aardio 代碼示例：

import winex;
import winex.accObject;
import winex.key;

//遍歷瀏覽器窗口（兼容 Chrome，Edge 等）
for hwnd,title in winex.each("Chrome_WidgetWin_1") { 
	
	//獲取 MSAA 接口對象
	var accObject=winex.accObject.fromWindow(hwnd);	
	
	//查找文本框
	var edit=accObject.find(
		role=0x2A;
		name="<Address and search bar>|<地址和搜索欄>";
	)
	
	if(edit){ 
		//獲取瀏覽器地址欄內容
		var url=edit.value();
		
		//修改瀏覽器地址欄內容
		edit.setValue("javascript：alert(document.location.href)")
		edit.takeFocus();

		//后臺發送按鍵消息
		winex.key.click(hwnd,"ENTER");
		thread.delay(1000);
	} 
}

運行一下看看效果：

所有 Windows 系統都自帶 MSAA，接口簡單，易于使用，生成的 EXE 程序體積也會很小。aardio 標準庫 winex.accObject 則對 MSAA 做了進一步封裝，用法就更簡單了。

窗口基礎知識

1、什么是窗口

「窗口」是應用程序在屏幕上創建的一個顯示區域，通常用于接收并處理用戶操作，并顯示要輸出的內容。窗口上的文本框、按鈕、菜單這些也都是窗口。

我們一般將頂層獨立窗口稱為「窗體」，而窗體上的子窗口稱為「控件」。

2、什么是窗口句柄

窗口句柄是一個用于唯一標準窗口的整數值。

其實很多系統資源，例如位圖、進程、線程都有唯一標準資源的句柄。

在 aardio 中所有句柄都存為指針類型，唯有窗口句柄是普通的數值類型。

3、無句柄窗口

無句柄窗口是指該窗口上的控件沒有創建子窗口，典型的例如網頁上的按鈕、文本框都沒有窗口句柄。MSAA 可用于操作無句柄窗口。

使用窗口探測器

請在 aardio 中打開 『工具 > 探測器 > 窗口探測器』：

拖動『窗口探測器』左下角的十字圖標到目標窗口上，就會顯示窗口信息。

使用窗口探測器我們可以發現 Chrome, Edge 等瀏覽器的網頁窗口類名都是 "Chrome_WidgetWin_1", 所以我們可以用下面的 aadio 代碼獲取所有打開的瀏覽器窗口：

import winex;

for hwnd,title in winex.each("Chrome_WidgetWin_1") { 
	
	
}

aardio 中 winex 名字空間的所有庫、函數都是用于操作外部程序窗口的。

winex.each() 用于遍歷所有符合條件的窗口， winex.each() 的第一個參數可以指定窗口類名，這個類名支持模式匹配語法（ 類正則表達式，但更簡單，用法請參考語法文檔 ）。

自窗口句柄獲取 MSAA 對象

自窗口句柄獲取 MSAA 對象，代碼很簡單：

import winex;
import winex.accObject;

//遍歷瀏覽器窗口（兼容 Chrome，Edge 等）
for hwnd,title in winex.each("Chrome_WidgetWin_1") { 
	
	//獲取 MSAA 接口對象
	var accObject=winex.accObject.fromWindow(hwnd);	

}

使用 MSAA 探測工具

請在 aardio 中打開 winex.accObject 的文檔或源碼，搜索“ACC對象瀏覽工具” 并下載該工具（ inspect.exe ）。

運行 inspect.exe ，點選下圖的『 Watch Cursor 』圖標：

也就是允許探測鼠標指向的窗口。

然后將鼠標移向瀏覽器的地址欄，Inspect 找到了地址欄所在的 ACC 對象，并顯示了一堆信息，我們重點關注這幾行：

Name:	"Address and search bar"
Role:	editable text (0x2A)

Name 是 ACC 對象的名稱。
Role 是 ACC 對象的角色，其實就是控件類型。

根據上面的信息，我們修改代碼獲取瀏覽器地址欄：

import winex;
import winex.accObject;
import console;

//遍歷瀏覽器窗口（兼容 Chrome，Edge 等）
for hwnd,title in winex.each("Chrome_WidgetWin_1") { 
	
	//獲取 MSAA 接口對象
	var accObject=winex.accObject.fromWindow(hwnd);	
	
	//查找地址欄
	var edit=accObject.find(
		role=0x2A;
		name="<Address and search bar>|<地址和搜索欄>";
	)
	
	//顯示地址欄的內容
	if(edit) console.log( edit.value() )

}

console.pause();

在 aardio 中運行上面的代碼，我們干凈利索地拿到了瀏覽器地址欄的網址。

拿到一個 accObject 對象以后，可以調用 accObject.find() 函數繼續查找符合條件的子節點。而查找參數就是我們用 Inspect.exe 探測到的參數。

查找參數中，role, state 可以是文本，也可以是數值，一般建議用數值（ 速度更快 ）。

上面的 name 參數用到了模式匹配：

name="<Address and search bar>|<地址和搜索欄>";

這個模式表達式中的 | 線是 “或” 的意思，而 < > 括號用于包含子串。如果目標 ACC 對象的 name 包含 "Address and search bar" 或者 "地址和搜索欄" 都符合條件。

后臺按鍵

aardio 標準庫 key，mouse 用于對前臺窗口模擬按鍵鼠標。

例如：

key.press("ENTER")

作用就是模擬按下回車鍵。

如果我們改用 winex.key, winex.mouse 就可以直接向后臺窗口發送按鍵或鼠標消息。這樣的好處是不會干擾用戶操作。

例如向瀏覽器窗口發送回車鍵消息：

import winex;
import winex.key;

//遍歷瀏覽器窗口（兼容 Chrome，Edge 等）
for hwnd,title in winex.each("Chrome_WidgetWin_1") { 

	//后臺發送按鍵消息
	winex.key.click(hwnd,"ENTER");
	thread.delay(1000);
}

鍵名

操作按鍵的函數都需要用到鍵名。

我們還可以直接運行 aardio 『 工具 > 鼠標按鍵 > 按鍵指令生成器』

在『按鍵指令生成器』窗口內我們任意按鍵，就可以顯示對應的鍵名了。

聽說 UIA 更先進

有時候先進也是一種負擔，飛機比自行車先進，這不等于任何時候都要用飛機替代自行車。

當然，在 aardio 中調用 UIA 也是很簡單的，示例（ 可獨立運行 ）：

import process;
process.executeWaitInput("notepad.exe",io.getSpecial(0x25/*_CSIDL_SYSTEM*/,"drivers\etc\HOSTS"));
 
//導入 .Net 類
import System.Windows.Automation;
TreeScope=::UIAutomationTypes.import("System.Windows.Automation.TreeScope"); 

//訪問 .Net 類的靜態成員
Automation=System.Windows.Automation;
AutomationElement=Automation.AutomationElement;
RootElement=AutomationElement.RootElement;

//查找記事本窗口
var condNotepadClass=Automation.PropertyCondition(AutomationElement.ClassNameProperty,"Notepad")
var notepad=RootElement.FindFirst( TreeScope.Children, condNotepadClass) 

//查找記事本的編輯框
var condEditClass=Automation.PropertyCondition(AutomationElement.ClassNameProperty,"Edit");
var editBox=notepad.FindFirst( TreeScope.Descendants, condEditClass); 

if(!editBox){
	//Windows 11
	condEditClass=Automation.PropertyCondition(AutomationElement.ClassNameProperty,"RichEditD2DPT");
	editBox=notepad.FindFirst( TreeScope.Descendants, condEditClass); 	
}

//獲取記事本內的文本
var textPattern=editBox.GetCurrentPattern(Automation.TextPattern.Pattern);
var text=textPattern.DocumentRange.GetText(50)

import win.dlg.message;
win.dlg.message().info(text + " ……")

然并卵，WebDriver 不香么？

aardio 調用 WebDriver 就更簡單了，示例：

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

• HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

• <!DOCTYPE html> 聲明為 HTML5 文檔
• <html> 元素是 HTML 頁面的根元素
• <head> 元素包含了文檔的元（meta）數據，如 <meta charset=“utf-8”> 定義網頁編碼格式為 utf-8。
• <title> 元素描述了文檔的標題
• <body> 元素包含了可見的頁面內容
• <h1> 元素定義一個大標題
• <p> 元素定義一個段落

什么是HTML？

• HTML 是用來描述網頁的一種語言。
• HTML 指的是超文本標記語言: HyperText Markup Language
• HTML 不是一種編程語言，而是一種標記語言
• 標記語言是一套標記標簽 (markup tag)
• HTML 使用標記標簽來描述網頁
• HTML 文檔包含了HTML 標簽及文本內容
• HTML文檔也叫做 web 頁面
• HTML 標簽
• HTML 標記標簽通常被稱為 HTML

標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。