使用“Memory Inspector”面板检查 ArrayBuffer、TypedArray、DataView 或 Wasm 内存
使用“Network conditions”(广告联盟条件)面板替换用户代理字符串
使用“网络请求屏蔽”面板有选择地屏蔽资源
使用“性能监控”面板实时分析运行时性能
通过协议监控面板查看和发送 CDP 请求
查看源文件,同时借助“快速来源”面板访问其他工具
远程调试 Android 设备
通过端口转发访问本地服务器和 Chrome 实例
远程调试 WebView
功能参考资料
对比度和可读性
跟踪元素焦点
利用辅助技术浏览开发者工具
Chrome 自动填充功能
可让您轻松在网站上使用已保存的地址自动填写表单。借助 DevTools 中的
自动填充
面板,您可以检查表单字段、预测的自动填充值和已保存数据之间的映射。
将地址信息保存到 Chrome
默认情况下,当您提交在线表单时,Chrome 会提示您保存您在表单中输入的地址信息。
如果没有看到此提示,请在 Chrome 的右上角依次前往
more_vert
自定义及控制 Google Chrome
>
key
密码和自动填充
>
location_on
地址等
,然后开启
toggle_on
保存和填充地址
。您还可以在此处
添加新地址
。
如果您没有保存地址数据,也不想保存,可以使用
自动填充
面板提供的
测试地址数据
。
打开“自动填充”面板
默认情况下,如果 DevTools 处于打开状态,并且您在网站上自动填充表单,系统会自动打开
自动填充
面板。如需关闭此功能,请手动打开该面板,然后清除
check_box_outline_blank
自动打开此面板
复选框。
如需手动打开
自动填充
面板,请执行以下操作:
打开开发者工具
。
按以下任一键打开
命令菜单
:
macOS:
Command
+
Shift
+
P
Windows、Linux、ChromeOS:
Ctrl
+
Shift
+
P
开始输入
autofill
,选择
显示自动填充
,然后按
Enter
键。
默认情况下,开发者工具会在开发者工具窗口底部的
抽屉
中打开该面板。您也可以
将其移至顶部
。
或者,您也可以通过以下方式打开
自动填充
面板:
在顶部的操作栏中,点击
double_arrow
更多面板
,然后从下拉列表中选择
自动填充
。
在右上角,依次选择
more_vert
Customize and control DevTools
(自定义和控制开发者工具)>
More tools
(更多工具)>
Autofill
(自动填充)。
检查自动填充数据
如需检查自动填充数据,请执行以下操作:
确保已在 Chrome 中开启
自动填充
功能,并保存了地址信息
。或者,您也可以使用测试地址数据,如下一部分所述。
例如,在
此演示页面
上
打开开发者工具
。
在演示页面上的地址网页表单中,将焦点置于某个表单字段。Chrome 显示一个下拉菜单,其中包含自动填充数据选项。
从菜单中选择一个选项。
自动填充
功能会使用已保存的数据填充表单,并且如果
自动打开
,DevTools 会打开
自动填充
面板。否则,请手动打开
自动填充
面板。
如未另行说明,那么本页面中的内容已根据
知识共享署名 4.0 许可
获得了许可,并且代码示例已根据
Apache 2.0 许可
获得了许可。有关详情,请参阅
Google 开发者网站政策
。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-04-16。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2024-04-16。"],[],[]]