Chrome开发者工具使用教程

端开发中，经常需要调试代码，所以各种调试工具及浏览器控制台的使用会对开发起到很大的作用。下面对目前很受喜欢的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 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

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。

在线咨询

上一篇：CSS中的：any-link、-focus-visi
下一篇：手机查看IGES,STP,STEP文件APP推荐-G

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商