如何用浏览器执行自己写的js

用浏览器执行自己写的JS可以通过嵌入到HTML文件、在浏览器的开发者工具中直接执行、创建书签脚本（bookmarklet）等方式实现。我们将详细介绍其中一种方法：嵌入到HTML文件。

嵌入到HTML文件：这是最常见且直观的方法，适用于大多数初学者和开发者。通过在HTML文件中嵌入JavaScript代码，你可以更直观地看到JS代码对网页的影响。

一、嵌入JavaScript到HTML文件

在HTML文件中嵌入JavaScript有三种主要方式：内联脚本、内部脚本和外部脚本。

1、内联脚本

内联脚本是将JavaScript代码直接写在HTML元素的事件属性中，例如按钮的点击事件。这种方式适用于少量代码。

<!DOCTYPE html>
<html>
<head>
    <title>内联脚本示例</title>
</head>
<body>
    <button onclick="alert('Hello, World!')">点击我</button>
</body>
</html>

2、内部脚本

内部脚本是将JavaScript代码写在HTML文件的<script>标签内。这种方式适用于中小规模的代码。

<!DOCTYPE html>
<html>
<head>
    <title>内部脚本示例</title>
    <script>
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

3、外部脚本

外部脚本是将JavaScript代码写在单独的.js文件中，然后在HTML文件中通过<script src="path/to/yourfile.js"></script>标签引入。这种方式适用于大规模代码和多人协作开发。

HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title>外部脚本示例</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

script.js文件：

function sayHello() {
    alert('Hello, World!');
}

二、使用浏览器的开发者工具

浏览器的开发者工具提供了一个方便的环境来编写和执行JavaScript代码。以下是一些主要的浏览器及其开发者工具的使用方法。

1、Google Chrome

在Google Chrome中，你可以按下F12键或者右键点击页面并选择“检查”来打开开发者工具。然后，切换到“Console”标签，直接输入和执行JavaScript代码。

console.log('Hello, World!');

2、Mozilla Firefox

在Mozilla Firefox中，你可以按下Ctrl+Shift+K键或者右键点击页面并选择“检查元素”来打开开发者工具。然后，切换到“控制台”标签，直接输入和执行JavaScript代码。

3、Microsoft Edge

在Microsoft Edge中，你可以按下F12键或者右键点击页面并选择“检查”来打开开发者工具。然后，切换到“Console”标签，直接输入和执行JavaScript代码。

三、创建书签脚本（Bookmarklet）

书签脚本是一种特殊的书签，它包含的是JavaScript代码而不是URL。当你点击这个书签时，JavaScript代码会在当前页面上执行。

1、创建书签脚本

首先，打开浏览器的书签管理器，创建一个新的书签。在URL字段中输入以下代码：

javascript:(function(){alert('Hello, World!');})();

然后保存这个书签。点击这个书签时，JavaScript代码将会在当前页面上执行。

2、实用案例

书签脚本可以用来执行一些常用的操作，例如调整页面样式、提取页面数据等。以下是一个调整页面背景色的示例：

javascript:(function(){document.body.style.backgroundColor = 'lightblue';})();

四、总结

用浏览器执行自己写的JavaScript代码有多种方法，每种方法都有其适用的场景和优缺点。嵌入到HTML文件、使用浏览器的开发者工具、创建书签脚本都是常用且有效的方式。选择合适的方法可以提高开发效率，增强代码的可维护性和可读性。

在实际开发中，我们也推荐使用一些专业的项目团队管理系统来提升协作效率，例如研发项目管理系统PingCode和通用项目协作软件Worktile。这些工具可以帮助团队更好地管理项目进度、分配任务和跟踪问题，从而提升整体开发效率。