jquery抓取网页内容( 本文和调试()()的调试及调试)

　　jquery抓取网页内容(

本文和调试()()的调试及调试)

　　

　　前言

　　本文不涉及性能面板的内容。稍后将发表另一篇文章。以下是目录：

　　常用命令和调试 Blackbox 脚本： Blackbox Script Console 内置命令 远程调试 WebView1. Chrome Devtools 的使用2. 菜单面板拆解

　　

　　3.常用命令及调试1.调出快捷面板：cmd + shift + p

　　打开 Devtools，输入 cmd+shift+p 激活它，然后开始在栏中输入您要查找的命令或输入“？” 签名以查看所有可用的命令。

　　

　　

　　1.性能监视器:> 性能监视器

　　

　　将显示性能监视器以及 CPU、JS 堆大小和 DOM 节点等相关信息。

　　2.FPS实时监控性能：>FPS选择第一项

　　

　　3.要捕获单个元素：> screen 选择捕获节点屏幕截图

　　

　　

　　2. DOM 断点调试

　　当您想要调试特定元素的 DOM 中的更改时，可以使用此选项。这些是 DOM 更改断点的类型：

　　

　　

　　如上图：输入框获得焦点时*敏*感*词*form标签并触发断点调试

　　3. 黑盒脚本：黑盒脚本

　　删除多余的脚本断点。

　　例如第三方（Javascript 框架和库的堆栈跟踪、广告等）。

　　为避免这种情况并专注于核心代码，请在 Sources 或 Network 选项卡中打开文件，右键单击并选择 Blackbox Script

　　

　　4. 事件*敏*感*词*器：Event Listener Breakpoints 点击Sources面板展开Event Listener Breakpoints，选择*敏*感*词*事件类别，触发事件启用断点

　　

　　如上图：*敏*感*词*键盘输入事件后，会跳转到断点处。

　　5. 本地覆盖：本地覆盖

　　用我们自己的本地资源覆盖网页使用的资源。

　　同样，使用 DevTools 工作区设置持久化，将本地文件夹映射到网络，修改 chrome 开发者功能中的 CSS 样式，都会直接更改本地文件，重新加载页面，以及使用本地资源。达到持久的效果。

　　此项可以自动修改XHR异步请求以外的资源。如果下载的文件没有格式化，可以点击左下角。

　　

　　6. 扩展：本地覆盖模拟模拟数据

　　来自：chrome 开发者工具 - 本地覆盖

　　对于返回json数据的接口，可以使用该函数简单模拟返回数据。

　　例如：

　　

　　对象或数组类型，从而覆盖原来的接口请求。

　　4. 控制台内置命令

　　可以执行常见任务的功能，例如选择 DOM 元素、触发事件、监视事件、在 DOM 中添加和删除元素等。

　　这就像 Chrome 自己实现的 jQuery 的增强版。

　　1. $(selector, [startNode]): 单个选择器

　　document.querySelector 的简写语法：

　　$('a').href;

$('[test-id="logo-img"]').src;

$('#movie_player').click();

复制代码

　　

　　控制台也会提前查询对应的标签，很贴心。也可以触发事件，例如暂停播放：

　　

　　此函数还支持第二个参数 startNode，它指定要从中搜索元素的“元素”或节点。该参数的默认值为文档

　　2. $(selector, [startNode]): 全选择器

　　document.querySelectorAll 的简写，返回标签元素数组语法：

　　$('.button')

复制代码

　　

　　可以使用循环切换全选

　　

　　或打印属性

　　

　　此函数还支持第二个参数 startNode，它指定要从中搜索元素的“元素”或节点。此参数的默认值是文档用法：

　　var images = $('img', document.querySelector('.devsite-header-background'));

for (each in images) {

console.log(images[each].src);

}

复制代码

　　

　　3. $x(path, [startNode]): xpath 选择器

　　$x(path) 返回与给定 xpath 表达式匹配的 DOM 元素数组。

　　例如，以下代码返回

　　页面上的所有元素：

　　$x("//p")

复制代码

　　

　　以下代码返回

　　收录元素的所有元素：

　　$x("//p[a]")

复制代码

　　

　　Xpath多用于爬虫爬取，前端同学可能不太熟悉。

　　4. getEventListeners(object)：获取指定对象的绑定事件

　　getEventListeners(object) 返回在指定对象上注册的事件*敏*感*词*器。返回值是一个对象，其中收录每个注册事件类型的数组（例如，click 或 keydown）。每个数组的成员都是描述为每种类型注册的侦听器的对象。用法：

　　getEventListeners(document);

复制代码

　　

　　相比在监控面板中查看事件，这个 API 方便多了。

　　5. 花哨的控制台

　　

　　除了不同级别的警告和错误打印

　　

　　还有其他非常有用的印刷品。

　　1. 可变打印：%s、%o、%d 和 %c

　　const text = "文本1"

console.log(`打印${text}`)

复制代码

　　除了标准的 ES6 语法之外，实际上还支持四种类型的字符串输出。他们是：

　　console.log("打印 %s", text)

复制代码

　　还有一个特殊的 %c 可以用来重写输出样式。

　　console.log('%c 文本1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')

复制代码

　　

　　当然，你也可以和其他人结合使用（注意占位符的顺序）。

　　const text = "文本1"

console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)

复制代码

　　

　　你也可以这样玩：

　　console.log('%c Auth ',

'color: white; background-color: #2274A5',

'Login page rendered');

console.log('%c GraphQL ',

'color: white; background-color: #95B46A',

'Get user details');

console.log('%c Error ',

'color: white; background-color: #D33F49',

'Error getting user details');

复制代码

　　

　　2. 打印对象的技巧

　　当我们需要打印多个对象时，我们往往会一个一个地输出。而且看不到对象名，不利于阅读：

　　

　　我以前是这样打印的：

　　console.log('hello', hello);

console.log('world', world);

复制代码

　　这显然有点笨拙和麻烦。实际上，输出也支持对象解构：

　　console.log({hello, world});

复制代码

　　

　　3. 布尔断言打印：console.assert()

　　当您需要在评估某些条件时打印日志时，这很有用。

　　语法

　　console.assert（assertion，obj）

复制代码

　　用法

　　const value = 1001

console.assert(value===1000,"value is not 1000")

复制代码

　　

　　4. 对控制台进行分组：console.group()

　　当您需要将详细信息分组或嵌套在一起以便能够轻松读取日志时，请使用此功能。

　　console.group('用户列表');

console.log('name: 张三');

console.log('job: 前端');

// 内层

console.group('地址');

console.log('Street: 123 街');

console.log('City: 北京');

console.log('State: 在职');

console.groupEnd(); // 结束内层

console.groupEnd(); // 结束外层

复制代码

　　

　　5. 测试执行效率：console.time()

　　不如性能 API 精确，但比易于使用更好。

　　let i = 0;

console.time("While loop");

while (i < 1000000) {

i++;

}

console.timeEnd("While loop");

console.time("For loop");

for (i = 0; i < 1000000; i++) {

// For Loop

}

console.timeEnd("For loop");

复制代码

　　

　　6. 输出表：console.table()

　　这个适用于打印数组对象。. .

　　let languages = [

{ name: "JavaScript", fileExtension: ".js" },

{ name: "TypeScript", fileExtension: ".ts" },

{ name: "CoffeeScript", fileExtension: ".coffee" }

];

console.table(languages);

复制代码

　　

　　7. 打印 DOM 对象节点：console.dir()

　　打印出对象的所有属性和属性值。console.dir() 和 console.log() 的区别并不明显。如果用于打印字符串，则输出完全相同。

　　console.log（"Why，hello!"）；

console.dir（"Why，hello!"）;

复制代码

　　

　　输出对象时，只是显示方式不同（log被识别为字符串输出，dir直接打印对象）。

　　

　　唯一显着的区别是打印 dom 对象：

　　console.log(document)

console.dir(document)

复制代码

　　

　　一个打印出普通标签，另一个打印出 DOM 树对象。

　　6. 远程调试WebView

　　使用 Chrome 开发者工具在原生 Android 应用程序中调试 WebView。

　　配置 WebView 以进行调试。在 WebView 类上调用静态方法 setWebContentsDebuggingEnabled。if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); 复制代码在手机上启用usb调试，然后插入电脑。在 Chrome 地址栏中输入：Chrome://inspect

　　

　　通常，当您在 App 中打开 WebView 时，您的页面会被监控并以 chrome 显示。4. 点击页面下方的inspect，可以实时查看WebView页面在手机上的显示状态。（第一次使用可能是白屏，这是因为你需要去那里下载文件）

　　

　　除了检查选项卡，还有焦点选项卡：

　　也可以使用其他应用程序中的 WebView。例如，这是一个应用程序中的一个游戏，它也使用了一个网页：

　　

　　7.调试 Node.js

　　详情可以查看阿里云社区的这篇文章：

　　Node.js 应用程序故障排除手册 - 正确启用 Chrome DevTools

　　

　　ps：属于我的知识盲区，我就不搬了。

　　参考

　　实用的 Chrome 开发工具 —

　　常用命令和调试移动网络专家 —

　　远程调试控制台实用程序 API 参考 控制台 API 参考

　　❤️读一件事

　　如果你觉得这个内容有启发性，我想邀请你帮我一个小忙：

　　点个赞，让更多人看到这个内容