WEEW12 BLOG

外观

03：JavaScript快速入门——代码引入、编辑器、运行与调试全解

约 1934 字大约 6 分钟

2026-04-10

本篇将带你完成从零到一的JavaScript环境认知与调试入门。你将掌握如何在HTML中正确引入JS代码、选择合适的开发工具、理解本地运行与服务器环境的差异，并学会使用Chrome开发者工具进行代码调试。这些是后续深入学习JS语法和框架的必备前置技能。

本篇核心收获

  • 掌握两种JavaScript代码引入方式：内嵌<script>与外部.js文件
  • 了解推荐使用的文本编辑器及避坑指南（禁用Word/记事本）
  • 理解file://协议限制，明确开发阶段需要Web服务器环境
  • 学会使用Chrome开发者工具（Console面板）进行代码测试与变量输出
  • 掌握基础的调试方法（console.log）及进阶断点调试概念

一、JavaScript代码的两种引入方式

JavaScript代码必须嵌入HTML文档中才能被浏览器执行。通常我们把JS代码放到<head>标签内，但也可以放在任意位置。

1. 内嵌式：直接写在HTML中

使用<script>...</script>标签包裹JavaScript代码，浏览器会直接执行标签内的内容。

<html>
<head>
    <script>
        alert('Hello, world');
    </script>
</head>
<body>
    ...
</body>
</html>

注意：<script>标签可以出现在页面任意位置，浏览器按顺序依次执行。

2. 外链式：引用独立的.js文件

将JavaScript代码写入一个单独的.js文件（例如/static/js/abc.js），然后在HTML中通过<script src="..."></script>引入。

<html>
<head>
    <script src="/static/js/abc.js"></script>
</head>
<body>
    ...
</body>
</html>

外链式的优势：

  • 更利于代码维护和复用
  • 多个页面可以共享同一个.js文件
  • 可以在同一页面中引入多个.js文件，浏览器按顺序执行

关于type属性

有时你会看到<script type="text/javascript">的写法，但这是没有必要的。因为浏览器默认的type就是text/javascript，不必显式指定。

<script type="text/javascript">
    // 不推荐这样写，默认就是JS
</script>

模块小结：两种引入方式可根据场景灵活选用。内嵌适合简单示例或页面专属逻辑，外链适合项目级开发和代码复用。

二、编写JavaScript的工具选择

你可以使用任何文本编辑器编写JavaScript代码，但强烈推荐以下工具：

  • Visual Studio Code：微软出品，免费、跨平台，内置JavaScript支持，可看作迷你版Visual Studio，强烈推荐！
  • Sublime Text：好用的文本编辑器，免费（不注册会不定时弹出提示框）

⚠️ 避坑指南：绝对不要用以下工具编写代码

  • Word / 写字板：它们保存的是带格式的富文本，不是纯文本文件，浏览器无法正常读取。
  • 记事本（不推荐）：记事本在保存UTF-8格式文本时会自作聪明地添加BOM头，可能导致代码执行异常。

模块小结：选择一款合适的代码编辑器（如VS Code）能极大提升编码效率。务必确保保存的文件为纯文本格式，且编码推荐使用UTF-8（无BOM）。

三、如何运行JavaScript代码

要让浏览器执行JavaScript，必须有一个HTML页面，并在页面中引入JS代码，然后用浏览器加载该HTML页面。

本地运行的限制（file://协议）

你可能会想：直接在硬盘上创建HTML和JS文件，双击用浏览器打开不就行了？

这种方式可以运行部分JS代码，但由于浏览器的安全限制，以file://开头的地址无法执行联网等需要网络权限的JavaScript代码（如AJAX请求、操作本地文件等）。

正确做法：你需要架设一个Web服务器（如Apache、Nginx、或者使用VS Code的Live Server插件），然后通过http://开头的地址访问页面，这样才能正常执行所有JS代码。

试试运行下面的代码：

// 以双斜杠开头直到行末的是注释，注释是给人看的，会被浏览器忽略
/*
在这中间的也是注释，将被浏览器忽略
*/
// 第一个JavaScript代码：
alert('Hello, world'); // 观察执行效果

浏览器会弹出一个对话框，显示“Hello, world”。你也可以修改两个单引号中间的内容，再试着运行。

模块小结：学习初期可使用在线运行环境或本地file://简单测试，但正式开发时务必搭建本地Web服务器，避免因协议限制导致功能异常。

四、调试JavaScript代码

“工欲善其事，必先利其器。”当代码执行结果不符合预期时，你需要调试。作为新手，请坚信：JavaScript本身没有问题，浏览器执行也没有问题，有问题的一定是我的代码。

1. 安装Chrome浏览器

Chrome浏览器对开发者非常友好，内置强大的调试工具。

下载地址：https://www.google.com/chrome/

2. 打开开发者工具

安装Chrome后，随便打开一个网页，点击菜单 “查看(View)” → “开发者(Developer)” → “开发者工具(Developer Tools)”。浏览器窗口会一分为二，下方显示开发者工具。

3. 使用Console面板

先点击 “控制台(Console)” 面板。在这个面板里可以直接输入JavaScript代码，按回车后执行。

常用调试命令：
要查看一个变量的内容，在Console中输入console.log(变量名);，回车后显示的值就是变量的内容。

let a = 100;
console.log(a); // 控制台会输出 100

关闭Console请点击右上角的“×”按钮。请熟练掌握Console的使用方法，在编写JavaScript代码时，经常需要在Console中运行测试代码。

4. 进阶调试技巧（Sources面板）

如果你对自己有更高要求，可以研究开发者工具的 “源码(Sources)” 面板，掌握断点、单步执行等高级调试技巧。这能帮助你精确追踪代码执行流程和变量变化。

模块小结：Chrome开发者工具是JS调试的核心武器。Console面板适合快速测试和输出变量，Sources面板适合复杂逻辑的断点排查。熟练使用它们，排错效率提升10倍。

五、动手练习

打开新浪首页（https://www.sina.com.cn），然后：

  1. 查看页面源代码（右键 → 查看网页源代码），找一找引入的.js文件（通过<script src="...">）和直接编写在页面中的JavaScript代码。

  2. 在Chrome中打开开发者工具，切换到Console面板。

  3. 输入console.log('Hello');，回车查看执行结果。

通过这个练习，你将直观感受到外部JS文件与内嵌JS代码在真实网站中的使用方式，并验证Console面板的输出功能。

本篇核心知识点速记

  • 引入方式：内嵌<script>代码块 / 外链<script src="file.js">
  • 默认type：text/javascript，可省略不写
  • 编辑器推荐：VS Code（强烈推荐）、Sublime Text
  • 严禁使用：Word、写字板（非纯文本）；记事本（会加BOM头）
  • 运行限制：file://协议无法执行联网等高级功能 → 需要Web服务器（http://）
  • 调试工具：Chrome开发者工具（F12 / 菜单打开）
  • Console面板：直接运行JS代码，console.log()输出变量值
  • 进阶调试：Sources面板 → 断点、单步执行
  • 练习要点：查看新浪首页源代码，识别JS引入方式；在Console中执行console.log('Hello')

Copyright © 2026 weew12