如何在米侠浏览器中通过控制台直接修改页面文字和样式

阿浩酱_5845

阿浩酱_5845

2026-09-16

437人浏览

原创

在米侠浏览器中可通过控制台实时修改页面内容:启用整页可编辑模式(document.body.contenteditable="true")直接编辑文本;或用queryselector精准修改文字、html、样式;支持批量操作与动态插入提示元素,所有改动仅限当前标签页且刷新即失效。

如何在米侠浏览器中通过控制台直接修改页面文字和样式

你想在米侠浏览器里把商品页的“¥299”临时改成“¥19.9”,把弹窗标题“温馨提示”加粗变红,或者把整段用户协议文字缩小两号——这些都不用等网页更新,控制台输入几行代码,回车即生效,改动只保留在当前标签页,刷新就清空。

启用整页可编辑模式(最快捷)

F12 打开开发者工具 → 切换到 Console 标签页 → 输入 document.body.contentEditable = "true"; 并回车。

这一步会让整个页面变成类似 Word 的编辑状态,所有纯文本块(<p></p><h1></h1><span></span> 等)都能直接点击修改。【此时所有超链接将失效,无法跳转】,但按钮、图片、布局完全保留原样。

改完后,再输一次 document.body.contentEditable = "false"; 回车,即可退出编辑态,恢复全部交互功能。

精准定位并修改单个元素

右键目标文字 → 选择「检查元素」→ 在 Elements 面板中确认高亮节点 → 右键该节点 →「Copy」→「Copy selector」。

切回 Console,粘贴选择器并执行以下任一操作:

方法一:仅改文字内容
document.querySelector("#price").textContent = "¥19.9";

方法二:替换带格式的 HTML
document.querySelector(".popup-title").innerHTML = "⚠️ 强制提醒";

方法三:只改样式不碰内容
document.querySelector("div.terms").style.fontSize = "14px";

注意:如果目标元素是滚动加载或异步渲染的(比如评论区第3页),querySelector 可能返回 null。此时请先手动滚动到它出现,或改用 document.querySelectorAll(".item")[2].textContent = "...";

仿UC浏览器官方网站全屏jQuery幻灯片
仿UC浏览器官方网站全屏jQuery幻灯片

仿UC浏览器官方网站全屏jQuery幻灯片

下载

批量修改同类元素

第一步:选中所有 class 为 "price" 的节点
const prices = document.querySelectorAll(".price");

第二步:遍历并统一赋值
prices.forEach(el => el.textContent = "限时¥0.01");

第三步:若需同时改样式
prices.forEach(el => { el.textContent = "已抢光"; el.style.textDecoration = "line-through"; el.style.color = "#999"; });

这三步写在同一段 Console 里,按回车一次性执行。不用分多次输,避免中间状态残留。

动态插入新提示元素

const tip = document.createElement("div");

tip.id = "quick-note";

tip.textContent = "【调试中】此页已被手动干预";

tip.style.cssText = "position:fixed;top:5px;left:5px;background:#2196F3;color:white;padding:4px 8px;font-size:12px;z-index:9999;border-radius:2px;";

document.body.insertBefore(tip, document.body.firstChild);

相关文章

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

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

下载

相关标签:

浏览器 米侠浏览器

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

相关专题

更多
AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

2026.09.16

140

9

ai生成视频的工具免费版合集
ai生成视频的工具免费版合集

本专题汇总了当前免费AI生成视频工具的排行榜与推荐清单,涵盖seko、讯飞智作、AniShort及剧云、Lovart等多模型集成平台。同时整理了各工具的免费额度、输出时长、水印政策及适用场景差异,助您快速选择合适工具开启AI视频创作。

2026.09.16

60

10

Pandas时间序列分析与可视化报表
Pandas时间序列分析与可视化报表

本专题整理Pandas日期转换、时间索引、重采样、滚动窗口、时区处理、plot绘图、Styler表格样式和报表输出方法。

2026.09.16

60

23

Pandas数据筛选索引与清洗处理
Pandas数据筛选索引与清洗处理

本专题整理Pandas中的loc、iloc、条件筛选、query查询、缺失值处理、重复值删除、类型转换和字符串列清洗方法。

2026.09.16

40

25

Pandas数据读取导入与文件导出处理
Pandas数据读取导入与文件导出处理

本专题整理Pandas读取CSV、Excel、JSON、SQL、Parquet等文件的方法,以及to_csv、to_excel、to_sql和to_parquet等常用数据导出流程。

2026.09.16

40

27

GDB怎么设置断点
GDB怎么设置断点

本专题介绍GDB按照函数名、源代码行号和文件位置设置断点的方法,详细说明run、continue、next、step等命令的配合使用,帮助定位程序崩溃、逻辑异常及代码未按预期执行的问题。

2026.09.11

360

28

GDB怎么查看变量值
GDB怎么查看变量值

本专题介绍GDB调试过程中查看变量值的具体方法,涵盖局部变量、函数参数、数组、结构体和指针内容查询,同时整理变量持续显示、格式化输出及无法读取变量时的排查思路。

2026.09.11

120

22

GDB C++程序怎么调试
GDB C++程序怎么调试

本专题围绕GDB调试C++程序的实际过程,详细说明程序编译、调试器启动、命令行参数传入、断点命中和程序继续运行等步骤,并介绍条件断点、临时断点和观察点的设置方法,方便开发者跟踪复杂代码的执行状态。

2026.09.11

120

20

Iris框架MVC架构与依赖注入合集
Iris框架MVC架构与依赖注入合集

本专题讲解Iris框架MVC开发模式,包含控制器注册、方法命名与路径映射、By参数绑定、BeforeActivation自定义路由,以及依赖注入容器注册、数据库依赖注入、返回值序列化及MVC下WebSocket与gRPC整合实践。

2026.09.11

80

15

热门下载

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

精品课程

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

共0课时 | 0人学习

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

共0课时 | 0人学习