在 Chrome 浏览器 中执行 JavaScript 代码是 Web 开发中常用的做法。你可以在浏览器控制台（Console）中直接输入并执行 JavaScript 代码，或者在网页中嵌入 JavaScript 脚本。以下是几种常见的执行 JavaScript 代码的方法：
1. 在 Chrome 开发者工具中执行 JavaScript
Chrome 提供了强大的开发者工具，可以让你直接在浏览器中执行 JavaScript 代码并查看结果。
a. 打开开发者工具
- 方法 1：按
Ctrl + Shift + I（Windows/Linux）或Cmd + Option + I（Mac）打开开发者工具。 - 方法 2：右键点击页面的任何位置，选择 检查（Inspect），然后切换到 Console 标签。
b. 在 Console 中执行 JavaScript
- 切换到 Console 标签。
- 在控制台中，你可以直接输入 JavaScript 代码并按
Enter键执行。例如：
console.log("Hello, World!"); // 输出 "Hello, World!"你也可以执行更复杂的 JavaScript 代码，或者调用页面中的 DOM 元素。例如：
document.body.style.backgroundColor = "lightblue"; // 更改背景色c. 查看执行结果
执行 JavaScript 后，控制台会输出结果。例如，console.log() 打印到控制台，DOM 操作会立刻反映在网页上。
2. 通过 HTML 页面嵌入 JavaScript
除了在控制台中执行 JavaScript 代码，你还可以将 JavaScript 脚本嵌入到 HTML 页面中，并在浏览器中运行。通常通过 <script> 标签将 JavaScript 代码嵌入到网页中。
a. 创建 HTML 文件并嵌入 JavaScript
例如，创建一个简单的 HTML 文件，在其中嵌入 JavaScript 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<button id="myButton">点击我</button>
<script>
// 在这里写 JavaScript 代码
document.getElementById('myButton').onclick = function() {
alert('按钮被点击了！');
};
</script>
</body>
</html>- 将这段代码保存为
index.html。 - 双击打开文件，你将在浏览器中看到网页和按钮，点击按钮时会弹出提示框。
b. 外部 JavaScript 文件
如果你想将 JavaScript 代码保存在单独的 .js 文件中，可以通过 src 属性将它引用到 HTML 文件中。
例如，创建一个 script.js 文件，内容如下：
// script.js
alert('Hello from external JavaScript!');然后在 HTML 文件中引用这个 JavaScript 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External JS Example</title>
</head>
<body>
<h1>使用外部 JavaScript</h1>
<script src="script.js"></script> <!-- 引用外部 JS 文件 -->
</body>
</html>打开该 HTML 文件时，浏览器会执行 script.js 中的代码。
3. 通过 Bookmarks (书签) 执行 JavaScript
你还可以通过创建书签来执行 JavaScript 代码。这个方法可以用于快速执行 JavaScript 脚本。
a. 创建 JavaScript 书签
- 在浏览器的书签栏中创建一个新的书签。
- 将书签的 URL 设置为 JavaScript 代码，格式如下：
javascript:alert('Hello from bookmark!');- 保存并点击该书签，它会在当前页面上弹出一个提示框。
b. 应用场景
这种方法适用于你需要快速运行某些 JavaScript 脚本并不依赖于页面内容的情况。例如，清理页面的样式、调试脚本、快速执行某些功能等。
4. 通过 Chrome 扩展程序执行 JavaScript
除了直接在浏览器中执行，你还可以通过 Chrome 扩展 来注入和执行 JavaScript 代码。通过开发自己的扩展，或者使用一些现成的扩展（如 Tampermonkey 或 Greasemonkey），你可以在任何网站上运行自定义的 JavaScript。
例如，使用 Tampermonkey 扩展，你可以为特定网站编写自定义脚本并让它自动执行。
小结
在 Chrome 浏览器中执行 JavaScript 有多种方式：
- 开发者工具：直接在控制台中执行代码。
- HTML 文件：通过
<script>标签嵌入 JavaScript 代码。 - 外部 JavaScript 文件：将 JavaScript 代码放在外部文件中，通过
src引用。 - 书签：将 JavaScript 代码作为书签快速执行。
- Chrome 扩展：通过扩展程序注入并执行 JavaScript 代码。
通过这些方法，你可以轻松在浏览器中测试和调试 JavaScript 代码，适用于开发、调试、测试等场景。更多详细内容请关注其他文章！