端開發中,經常需要調試代碼,所以各種調試工具及瀏覽器控制臺的使用會對開發起到很大的作用。下面對目前很受喜歡的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 對象,代碼很簡單:
import winex;
import winex.accObject;
//遍歷瀏覽器窗口(兼容 Chrome,Edge 等)
for hwnd,title in winex.each("Chrome_WidgetWin_1") {
//獲取 MSAA 接口對象
var accObject=winex.accObject.fromWindow(hwnd);
}
請在 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 『 工具 > 鼠標按鍵 > 按鍵指令生成器』
在『按鍵指令生成器』窗口內我們任意按鍵,就可以顯示對應的鍵名了。
有時候先進也是一種負擔,飛機比自行車先進,這不等于任何時候都要用飛機替代自行車。
當然,在 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 + " ……")
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
都可以。
實例:
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</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。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。