JavaScript从入门到入神【在浏览器中调试】_在線javascript語句調試-优快云博客

本文链接：https://blog.youkuaiyun.com/java_dazhuzhu/article/details/140187811

*   [“debugger” 命令](about:blank#debugger__83)

*   [暂停并查看](about:blank#_99)

*   [跟踪执行](about:blank#_128)

*   [日志记录](about:blank#_168)

*   [总结](about:blank#_185)

在浏览器中调试

===================================================================

在编写更复杂的代码前，让我们先来聊聊调试吧。

[调试](调试_百度百科 (baidu.com)) 是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具 —— 开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码以查看当前实际运行情况。

在这里我们将会使用 Chrome（谷歌浏览器），因为它拥有足够多的功能，其他大部分浏览器的功能也与之类似。

“资源（Sources）”面板

你的 Chrome 版本可能看起来有一点不同，但是它应该还是处于很明显的位置。

在 Chrome 中打开示例页面。
使用快捷键 F12（Mac：Cmd+Opt+I）打开开发者工具。
选择 Sources（资源） 面板。

如果你是第一次这么做，那你应该会看到下面这个样子：

在这里插入图片描述

切换按钮会打开文件列表的选项卡。

让我们在预览树中点击和选择 hello.js。这里应该会如下图所示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xtDVp0Y4-1660222556246)(C:\Users\萧\AppData\Roaming\Typora\typora-user-images\image-20220613155127803.png)]$

资源（Sources）面板包含三个部分：

文件导航（File Navigator） 区域列出了 HTML、JavaScript、CSS 和包括图片在内的其他依附于此页面的文件。Chrome 扩展程序也会显示在这。
代码编辑（Code Editor） 区域展示源码。
JavaScript 调试（JavaScript Debugging） 区域是用于调试的，我们很快就会来探索它。

现在你可以再次点击切换按钮隐藏资源列表来给代码腾出一些空间。

控制台（Console）

如果我们按下 Esc，下面会出现一个控制台，我们可以输入一些命令然后按下 Enter 来执行。

语句执行完毕之后，其执行结果会显示在下面。

例如，1+2 将会返回 3，而 hello("debugger") 函数调用什么也没返回，所以结果是 undefined：

断点（Breakpoints）

我们来看看示例页面发生了什么。在 hello.js 中，点击第 4 行。是的，就点击数字 "4" 上，不是点击代码。

恭喜你！你已经设置了一个断点。现在，请在第 8 行的数字上也点击一下。

看起来应该是这样的（蓝色是你应该点击的地方）：

在这里插入图片描述

断点是调试器会自动暂停 JavaScript 执行的地方。

当代码被暂停时，我们可以检查当前的变量，在控制台执行命令等等。换句话说，我们可以调试它。

我们总是可以在右侧的面板中找到断点的列表。当我们在数个文件中有许多断点时，这是非常有用的。它允许我们：

快速跳转至代码中的断点（通过点击右侧面板中的对应的断点）。
通过取消选中断点来临时禁用对应的断点。
通过右键单击并选择移除来删除一个断点。
……等等。

ℹ️条件断点

在行号上 右键单击 允许你创建一个条件断点。只有当给定的表达式（你创建条件断点时提供的表达式）为真时才会被触发。

当我们需要在特定的变量值或参数的情况下暂停程序执行时，这种调试方法就很有用了。

“debugger” 命令

我们也可以使用 debugger 命令来暂停代码，像这样：


function hello(name) {

  let phrase = `Hello, ${name}!`;



  debugger;  // <-- 调试器会在这停止



  say(phrase);

}

这样的命令只有在开发者工具打开时才有效，否则浏览器会忽略它。

暂停并查看

在我们的例子中，hello() 函数在页面加载期间被调用，因此激活调试器的最简单的方法（在我们已经设置了断点后）就是 —— 重新加载页面。因此让我们按下 F5（Windows，Linux）或 Cmd+R（Mac）吧。

设置断点之后，程序会在第 4 行暂停执行：

请打开右侧的信息下拉列表（箭头指示出的地方）。这里允许你查看当前的代码状态：

察看（Watch） —— 显示任意表达式的当前值。

你可以点击加号 + 然后输入一个表达式。调试器将显示它的值，并在执行过程中自动重新计算该表达式。
调用栈（Call Stack） —— 显示嵌套的调用链。

此时，调试器正在 hello() 的调用链中，被 index.html 中的一个脚本调用（这里没有函数，因此显示 “anonymous”）

如果你点击了一个堆栈项，调试器将跳到对应的代码处，并且还可以查看其所有变量。
作用域（Scope） —— 显示当前的变量。

Local 显示当前函数中的变量，你还可以在源代码中看到它们的值高亮显示了出来。

Global 显示全局变量（不在任何函数中）。

这里还有一个 this 关键字，目前我们还没有学到它，不过我们很快就会学习它了。

跟踪执行

现在是跟踪脚本的时候了。

在右侧面板的顶部是一些关于跟踪脚本的按钮。让我们来使用它们吧。

▶️ —— “恢复（Resume）”：继续执行，快捷键 F8。

继续执行。如果没有其他的断点，那么程序就会继续执行，并且调试器不会再控制程序。我们点击它一下之后，我们会看到这样的情况：执行恢复了，执行到 say() 函数中的另外一个断点后暂停在了那里。看一下右边的 “Call stack”。它已经增加了一个调用信息。我们现在在 say() 里面。

总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！