03 JavaScript学习：浏览器中执行 JavaScript

我比较习惯Chrome浏览器。

Chrome 是由 Google 开发的免费网页浏览器，调试代码非常方便。

Chrome 官网地址：https://www.google.com/intl/zh-CN/chrome/。

控制台输出

浏览器的控制台是开发者工具中的一个重要组成部分，它可以用来查看网页的错误、警告、调试信息以及执行JavaScript代码等。下面我会详细解释一下控制台的常见输出信息，并举例说明：

1. 错误信息（Errors）：显示网页加载过程中发生的错误，例如资源加载失败、JavaScript语法错误等。这些错误可能会影响网页的正常运行。
   举例：在控制台中出现"Uncaught ReferenceError: functionA is not defined"，这表示在JavaScript代码中引用了未定义的函数functionA。
   
2. 警告信息（Warnings）：显示网页中的警告信息，例如过期的API使用、潜在的性能问题等。虽然不会导致程序崩溃，但也需要引起开发者的关注。
   举例：警告提示"Resource interpreted as Stylesheet but transferred with MIME type text/plain"，表示浏览器将某个资源当作样式表加载，但服务器返回的MIME类型却是text/plain，可能会导致样式无法正确应用。
   
3. 信息消息（Logs）：显示开发者或网页本身输出的信息，例如调试信息、状态信息等。开发者可以使用console.log()函数输出自定义信息。
   举例：网页中使用console.log(“Page loaded successfully”)，则在控制台中会显示"Page loaded successfully"。
   
4. 网络请求信息（Network Requests）：展示网页加载时发送和接收的网络请求信息，包括请求URL、请求方法、状态码、耗时等。
   举例：显示网页加载时向服务器请求了图片、CSS文件和JavaScript文件的信息，以及每个请求的详细信息和耗时情况。
   
5. 其他信息（Others）：包括其它类型的输出信息，例如对DOM操作的记录、性能跟踪信息等。
   

通过查看控制台输出信息，开发者可以及时发现和解决网页中的问题，从而提高网页性能和用户体验。

打开浏览器控制台的步骤

要使用F12键在Chrome浏览器中打开控制台，可以按照以下步骤进行：

1. 打开Chrome浏览器，在网页上任意位置按下F12键（或者Fn + F12，取决于你的键盘设置）。
   
2. 或者你也可以点击Chrome浏览器右上角的菜单按钮（三个点），选择“更多工具”，然后选择“开发者工具”。
   
   
3. 在弹出的开发者工具面板中，你会看到多个选项卡（Elements、Console、Sources等），选择“Console”选项卡即可进入控制台页面。
   
4. 现在你就可以在控制台中查看网页的错误、警告、调试信息以及执行JavaScript代码了。
   

通过按下F12键或通过菜单选项来打开控制台，你可以方便地进行网页的调试和分析工作。

用浏览器的Console 窗口调试 JavaScript 代码

当你在浏览器的Console窗口中调试JavaScript代码时，可以执行简单的代码，并查看输出结果。以下是一个示例：

假设你想计算1到10的所有整数的和。你可以这样做：

1. 打开浏览器，按下快捷键Ctrl+Shift+I（Windows/Linux系统）或Cmd+Option+I（Mac系统）来打开开发者工具。
2. 切换到Console选项卡。
3. 输入以下代码并按下回车执行：

let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
}
console.log("1到10的整数和为：" + sum);

执行上述代码后，你将会在Console窗口中看到输出结果：“1到10的整数和为：55”。

这就是在浏览器的Console窗口中调试JavaScript代码的一个简单示例。你可以在Console中执行各种JavaScript代码，并实时查看执行结果，以便进行调试、测试和验证。

Chrome snippets 小脚本(感觉很鸡肋)

我们也可以在 Chrome 浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件：

如果你没看到 Snippets ，可以点下面板上到 >> 就能看到了。

点击 Create new snippet 后，会自动创建一个文件，你只需在右侧窗口输入以下代码，然后按 Command+S（Mac）或 Ctrl+S（Windows 和 Linux）保存更改即可。

console.log(“runoob-1”)

console.log(“runoob-2”)

保存后，右击文件名，选择 “Run” 执行代码：

关注我，不迷路，共学习，同进步

关注我，不迷路，共学习，同进步