Chrome 浏览器中执行 JavaScript（深入浅出）

从零开始掌握 Chrome 浏览器中执行 JavaScript

你有没有遇到过这样的场景：在网页上看到某个按钮点击后毫无反应，或者页面内容动态变化却不知道是怎么实现的？这时候，如果你能直接在浏览器里运行一段 JavaScript 代码，就能立刻“透视”页面背后的逻辑。而 Chrome 浏览器，正是我们探索网页行为最强大的工具之一。

今天，我们就来深入聊聊如何在 Chrome 浏览器中执行 JavaScript。无论你是刚接触编程的初学者，还是已经有几年经验的中级开发者，这篇文章都会帮你打通从“看懂”到“动手”的关键一步。

打开开发者工具：通往 JavaScript 的入口

要开始在 Chrome 浏览器中执行 JavaScript，第一步是打开开发者工具。这就像打开一台精密仪器的控制面板，让你能观察和操控网页的每一个细节。

快速打开方式

• 按下快捷键 F12 或 Ctrl + Shift + I（Windows）/ Cmd + Option + I（Mac）
• 右键点击页面任意位置，选择“检查”（Inspect）
• 点击浏览器右上角的三个点菜单，选择“更多工具” → “开发者工具”

打开后，你会看到一个侧边栏，里面包含了多个标签页。我们要用到的是 Console（控制台） 标签。它就像是一个“命令行”，你输入的每一行 JavaScript 代码，都会在这里执行并立即看到结果。

💡 小贴士：如果你在公司或学校网络，某些网站可能禁用了开发者工具。这时候可以尝试使用无痕模式，或换个浏览器测试。

在 Console 中执行简单代码：从 Hello World 开始

让我们从最基础的“Hello World”开始，感受一下在 Chrome 浏览器中执行 JavaScript 的魅力。

console.log("你好，世界！");

这行代码的作用是向控制台输出一段文字。console.log() 是 JavaScript 中最常用的输出方法，就像在纸上写字一样，把信息打印出来供你查看。

✅ 注释说明：
console.log() 是浏览器提供的一个方法，用来在控制台输出信息。
括号内的内容可以是字符串、变量、表达式等，只要能被 JavaScript 解析，就能打印出来。
双引号包裹的内容是字符串，表示一段文本。

执行后，你会在控制台看到：

你好，世界！

这说明你的代码成功运行了。接下来，我们可以尝试更复杂的操作。

与网页元素互动：动态修改页面内容

JavaScript 的强大之处在于它能“操控”网页。比如，我们可以用代码改变页面上的文字、图片、颜色，甚至隐藏或显示某个元素。

案例：动态修改页面标题

假设你访问的网页标题是“欢迎来到我的博客”，我们想把它改成“我正在学习 JavaScript”。

// 通过 document.title 获取当前页面标题
// 然后重新赋值为新的标题
document.title = "我正在学习 JavaScript";

执行这段代码后，你会发现浏览器标签页的标题瞬间变了！这就是 JavaScript 在“实时”操作网页内容的体现。

✅ 注释说明：
document 是浏览器提供的一个对象，代表当前打开的网页文档。
title 是 document 的一个属性，表示页面标题。
通过 = 赋值，我们可以改变它的值。
这种方式无需刷新页面，即可实现动态更新。

更进一步：改变页面上的文字内容

假设页面上有一个 <p> 标签，内容是“这是原始文字”：

<p id="demo">这是原始文字</p>

我们可以通过 JavaScript 找到这个元素并修改它的内容：

// 通过 id 查找元素
const element = document.getElementById("demo");

// 修改元素的文本内容
element.textContent = "这是被 JavaScript 修改后的内容";

✅ 注释说明：
document.getElementById("demo") 是根据元素的 id 属性查找对应的 DOM 元素。
textContent 是一个属性，用来获取或设置元素内部的纯文本内容。
const 是 ES6 的变量声明方式，表示这个变量值不会改变。
通过这种方式，你可以精确控制页面上任意一个元素的内容。

使用变量与表达式：让代码更智能

在 Chrome 浏览器中执行 JavaScript，不只是“打印一句话”那么简单。我们可以用变量存储数据，用表达式进行计算，让代码变得更智能。

案例：计算两个数的和

// 定义两个变量，存储两个数字
let num1 = 10;
let num2 = 25;

// 计算它们的和
const sum = num1 + num2;

// 输出结果
console.log("两个数的和是：" + sum);

执行后，控制台会输出：

两个数的和是：35

✅ 注释说明：
let 用于声明一个可变的变量，适合在循环或条件中使用。
const 用于声明一个常量，值一旦设定就不能更改。
+ 是加法运算符，用于数字相加。
字符串拼接使用 +，例如 "A" + "B" 会变成 "AB"。

案例：判断用户年龄是否成年

// 定义一个变量存储用户年龄
let age = 18;

// 使用 if 条件判断是否成年
if (age >= 18) {
  console.log("你已经成年，可以独立做决定！");
} else {
  console.log("你还未成年，需要监护人同意。");
}

✅ 注释说明：
if 是条件判断语句，如果括号里的条件为 true，就执行花括号内的代码。
>= 是“大于等于”运算符，用于比较数值。
这种逻辑结构是编程的基础，几乎在所有项目中都会用到。

调试技巧：如何排查代码问题

在 Chrome 浏览器中执行 JavaScript，经常会遇到“代码没反应”或“报错”的情况。这时，掌握一些调试技巧就显得尤为重要。

常见错误类型

调试建议

• 观察控制台报错信息：Chrome 会用红色文字提示错误类型和位置，比如“Uncaught ReferenceError: x is not defined”。
• 使用 console.log() 打印中间值：在关键步骤输出变量的值，确认逻辑是否正确。
• 分段执行代码：不要一次性写太多代码，先测试一小段，确认无误再继续。

🛠 示例：如果你想确认某个变量的值，可以这样做：

let count = 0;
console.log("count 的初始值是：", count); // 打印变量值

count = count + 1;
console.log("count 加 1 后的值是：", count);

实际应用场景：自动化小工具

在日常开发中，Chrome 浏览器中执行 JavaScript 不仅用于学习，还能帮你解决实际问题。

案例：批量清除页面上的广告元素

假设某个网页上有很多广告，你想快速隐藏它们，可以使用以下代码：

// 查找所有 class 包含 "ad" 的元素
const ads = document.querySelectorAll(".ad, .advertisement");

// 遍历每个元素，将其隐藏
ads.forEach(function(ad) {
  ad.style.display = "none"; // 设置 CSS 样式为隐藏
});

✅ 注释说明：
querySelectorAll() 可以查找多个匹配的元素，返回一个 NodeList。
forEach() 是数组方法，用于遍历每一个元素。
style.display = "none" 是通过 CSS 隐藏元素，不删除，只是“看不见”。

这个技巧在测试网页布局、清理干扰信息时非常实用。

总结：从观察到掌控

通过这篇文章，你应该已经掌握了在 Chrome 浏览器中执行 JavaScript 的基本方法。从打开开发者工具，到执行简单代码，再到与页面元素互动、调试错误、编写实用脚本，每一步都为你打开了网页背后的“黑箱”。

Chrome 浏览器中执行 JavaScript，不仅是学习编程的起点，更是你成为前端开发者的“第一把钥匙”。它让你不再只是“浏览网页”，而是能“理解网页”、“操控网页”、“创造网页”。

无论你是想调试自己的网站，还是想探索别人网页的实现逻辑，掌握这项技能，都将让你在开发路上走得更稳、更远。下一次当你看到一个有趣的网页效果时，不妨打开控制台，动手试试——也许，你就能亲手实现它。

记住，每一个伟大的程序，都始于一行简单的代码。