Chrome

Mon, 01 Jan 0001 00:00:00 +0000

概述

参考：

官网

Chrome

Headless 模式

https://developer.chrome.com/docs/chromium/new-headless

https://developer.chrome.com/blog/headless-chrome

https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md

Headless Chrome 是 Chrome 浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有 Chrome 支持的特性运行你的程序。相比于现代浏览器，Headless Chrome 更加方便测试 web 应用，获得网站的截图，做爬虫抓取信息等。相比于出道较早的 PhantomJS，SlimerJS 等，Headless Chrome 则更加贴近浏览器环境。

Chrome 关联文件与配置

%LOCALAPPDATA%/Google/Chrome/ # 数据存储目录

./User Data/ # 用户数据目录。可以通过 –user-data-dir 标志指定其他路径。
- ./Default/ # 默认用户数据存储目录
- ./Profile X/ # 其他用户数据存储目录，X 是从 1 开始正整数。

配置详解

命令行参数

–user-data-dir(STRING) # 用户数据目录。
- Windows 默认值: %LOCALAPPDATA%/Google/Chrome/User Data/
- 注意：这个并不是某个具体用户的数据目录，而是整个 Chrome 运行时，所有用户的数据保存目录。
- 在该目录下有 Default、Profile X 这些目录，这些是具体到某个用户的数据保存路径。
–profile-directory(STRING) # 特定于某个具体用户的数据目录。
- Windows 默认值: Default
- 注意：这个值并不需要填写绝对路径。只需要填写相对路径，该选项的值是 –user-data-dir 配置的目录的子目录。
–remote-debugging-port(INT) # 开启 debug 端口，可以通过其他程序连接浏览器。

插件推荐

GitHub 项目，FelisCatus/SwitchyOmega # 快速切换浏览器要使用的代理

DevTools

Mon, 01 Jan 0001 00:00:00 +0000

概述

参考：

Chrome 开发者工具官方文档

Wiki, Web development tools

Chrome DevTools 是一组内置于 Chrome 浏览器中的 Web 开发者工具（通常使用 F12 快捷键打开；Ctrl + Shift +i 也是常见的默认快捷键）。

元素 # 当前网页被渲染的数据
控制台 # 可以输入 JS 代码
源代码/来源 # HTML、JS、CSS、字体等静态资源文件
网络 # 数据传输内容
…..
应用 #

元素

使用 Ctrl+Shift+C 快捷键可以选定页面上的元素以定位到 HTML 中的位置。

网络

控制台

在控制台中，通过查看日志消息和运行 JS 代码以控制页面的控制。

可以直接输出当前页面 js 代码中的各种变量、函数等等
等等

源代码

参考：

官方文档，源代码

在源代码中可以检查静态资源、打断点、等等。

当浏览器的请求被断点暂停时，我们可以将鼠标悬停后，看到 FunctionLocation 关键字，从这里追踪函数的位置。

Cdp on 断念梦的站点

Chrome

概述

Headless 模式

Chrome 关联文件与配置

配置详解

插件推荐

DevTools

概述

元素

网络

控制台

源代码