怎么在米侠浏览器中快速提取网页源代码并进行格式化高亮?

大墨君_1599

大墨君_1599

2026-10-15

754人浏览

原创

在米侠浏览器中获取高亮html源码需两步:先按ctrl+u(或cmd+opt+u)查看原始view-source页面,再在console执行脚本注入prettify实现语法高亮;若需渲染后dom,可用document.documentelement.outerhtml复制或内联样式高亮。

怎么在米侠浏览器中快速提取网页源代码并进行格式化高亮?

你想在米侠浏览器中直接拿到可读性强、带语法高亮的网页源代码,而不是一团挤在一起的原始HTML标签——这需要两步:先获取未渲染的原始源码,再用开发者工具注入高亮逻辑将其可视化呈现。

获取原始HTML源代码

按 Ctrl + U(Windows/Linux)或 Command + Option + U(macOS),浏览器立即在新标签页中打开纯文本格式的原始HTML源码。

该页面内容是服务器返回的、未经JavaScript修改的初始HTML,刷新后同步更新。注意:Elements面板显示的是实时DOM树,含JS动态插入内容,不是你要的源码。

将原始源码转为高亮可读格式

这一步不依赖插件,仅靠控制台脚本即可实现:

第一步:在刚打开的源码页面(view-source:开头的地址)按 F12 打开开发者工具→切换到 Console 面板。

第二步:粘贴并执行以下代码:

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

const pre = document.querySelector('pre'); if(pre) { const html = pre.textContent; pre.innerHTML = ''; const hlDiv = document.createElement('div'); hlDiv.innerHTML = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.css"> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script><pre class="prettyprint lang-html">' + html.replace(/, '/g, '&gt;') + '</pre>'; document.body.appendChild(hlDiv); }

第三步:回车执行后,页面将自动替换为带行号、关键字着色、缩进对齐的高亮HTML代码块。此时可自由拖选、右键复制,或用 Ctrl+A → Ctrl+C 全选复制。

【必须确保网络通畅】脚本需从 CDN 加载 prettify 库,离线状态下会失败;若页面被屏蔽外链,可提前下载 prettify.css 和 run_prettify.js 本地托管后修改链接路径。

替代方案:用开发者工具直接解析并高亮当前页DOM

方法一:适用于想查看“最终渲染结果”的结构化HTML(含JS生成部分)

在任意网页按 F12 → Console 中执行:document.documentElement.outerHTML → 回车 → 控制台输出完整HTML字符串 → 点击右侧「复制」图标即可复制原始文本。

方法二:快速高亮当前页DOM结构(无需外部CDN)

执行以下单行命令:document.body.innerHTML = '<style>body{font-family:monospace;line-height:1.4;padding:16px;background:#fff}code{color:#d44;font-weight:bold}tag{color:#07a}.attr{color:#a08}.val{color:#080}</style> <code>' + document.documentElement.outerHTML.replace(/,'/g,'>').replace(/(\$2').replace(/(\s+)(\w+)=/g,'$1<attr>$2</attr>=').replace(/="([^"]*)"/g,'="<val>$1</val>"') + '';

执行后页面立即变为带基础语义着色的高亮HTML视图,适合快速审查结构,但不支持多语言识别和复杂缩进计算。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

浏览器 米侠浏览器

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
剧云AI短剧创作教程合集
剧云AI短剧创作教程合集

本专题聚焦剧云AI短剧创作,讲解从短剧灵感、梗概、全局大纲到分集、分场和正文的完整流程及节奏设计方法。

2026.10.14

0

15

剧云AI剧本创作零基础入门
剧云AI剧本创作零基础入门

本专题系统讲解剧云AI剧本创作流程,涵盖灵感、梗概、大纲、分场与正文生成,帮助新手快速完成首个中文剧本项目。

2026.10.14

0

14

VibeKnow文档转视频操作指南
VibeKnow文档转视频操作指南

本专题讲解VibeKnow上传Word、TXT、Markdown等材料生成视频的方法,覆盖内容解析、脚本组织、画面生成与成片检查。

2026.10.14

0

15

VibeKnow知识视频制作与导出详解
VibeKnow知识视频制作与导出详解

本专题整理VibeKnow从注册、素材上传、AI生成到预览导出的完整操作,帮助新手快速制作第一条知识讲解视频。

2026.10.14

0

13

二狗PPT大纲编辑实操指南
二狗PPT大纲编辑实操指南

本专题聚焦二狗PPT结构化大纲的生成和修改,讲解标题、正文、目录、页数与页面顺序的调整方法,提升汇报逻辑和内容完整性。

2026.10.14

0

15

二狗PPT文档转PPT全教程
二狗PPT文档转PPT全教程

本专题讲解二狗PPT解析Word、PDF、Excel和PPT资料的方法,涵盖文件上传、内容提取、大纲整理、异常处理与转换后校对。

2026.10.14

0

13

讯飞绘文全功能使用教程
讯飞绘文全功能使用教程

本专题系统整理讯飞绘文官网入口、注册登录、工作台及内容创作流程,帮助用户熟悉常用功能,快速完成首篇图文内容。

2026.10.14

0

14

讯飞绘文AI写作与文案生成合集
讯飞绘文AI写作与文案生成合集

本专题聚焦讯飞绘文AI写作、提纲生成、文章改写和文案润色,覆盖从主题输入到成稿优化的关键操作与实用技巧。

2026.10.14

0

14

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

2026.10.10

100

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
phpMyAdmin 常见问题
phpMyAdmin 常见问题

共0课时 | 0人学习

uni-app快速上手
uni-app快速上手

共0课时 | 0人学习