JavaScript调试

迷南。 2023-09-30 12:05 35阅读 0赞

### 代码调试 ###

编程代码可能包含语法错误或逻辑错误。

其中许多错误很难诊断。

通常，当编程代码包含错误时，什么都不会发生。没有错误消息，并且您不会得到在哪里搜索错误的指示。

在编程代码中搜索（并修复）错误称为代码调试。

--------------------

### JavaScript 调试器 ###

调试并不容易。但幸运的是，所有现代浏览器都有内置的 JavaScript 调试器。

可以打开和关闭内置调试器，强制向用户报告错误。

使用调试器，您还可以设置断点（可以停止代码执行的地方），并在代码执行时检查变量。

通常，否则按照本页底部的步骤，在浏览器中使用 F12 键激活调试，然后在调试器菜单中选择“控制台”。

--------------------

### console.log() 方法 ###

如果您的浏览器支持调试，您可以使用`console.log()`在调试器窗口中显示 JavaScript 值：

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>My First Web Page</h1>
    
    <script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
    </script>
    
    </body>
    </html>

### 设置断点 ###

在调试器窗口中，您可以在 JavaScript 代码中设置断点。

在每个断点处，JavaScript 将停止执行，并让您检查 JavaScript 值。

检查值后，您可以恢复代码的执行（通常使用播放按钮）。

### 调试器关键字 ###

`debugger`关键字停止 JavaScript的执行，并调用（如果可用）调试函数。

这与在调试器中设置断点具有相同的功能。

如果没有可用的调试，则调试器语句无效。

打开调试器后，此代码将在执行第三行之前停止执行。

let x = 15 * 5;
    debugger;
    document.getElementById("demo").innerHTML = x;

--------------------

### 主要浏览器的调试工具 ###

通常，您在浏览器中使用 F12 激活调试，然后在调试器菜单中选择“控制台”。

否则请按照以下步骤操作：

### 铬合金 ###

*  打开浏览器。
 *  从菜单中选择“更多工具”。
 *  从工具中，选择“开发者工具”。
 *  最后，选择控制台。

### 火狐 ###

*  打开浏览器。
 *  从菜单中选择“Web 开发人员”。
 *  最后，选择“Web 控制台”。

### 边缘 ###

*  打开浏览器。
 *  从菜单中，选择“开发者工具”。
 *  最后，选择“控制台”。

### 歌剧 ###

*  打开浏览器。
 *  从菜单中选择“开发人员”。
 *  从“开发人员”中，选择“开发人员工具”。
 *  最后，选择“控制台”。

### 苹果浏览器 ###

*  转到主菜单中的 Safari、首选项、高级。
 *  选中“在菜单栏中启用显示开发菜单”。
 *  当新选项“开发”出现在菜单中时：  
    选择“显示错误控制台”。

发表评论取消回复

表情：

评论列表（有 0 条评论，35人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript调试技巧

阅读目录阐述 debugger console.table(animals) 用表格显示对象使用 console.tim

梦里梦外;/ 2023年10月06日 23:49/ 0 赞/ 37 阅读

相关 JavaScript调试

代码调试编程代码可能包含语法错误或逻辑错误。其中许多错误很难诊断。通常，当编程代码包含错误时，什么都不会发生。没有错误消息，并且您不会得到在哪里搜索错误的指示。

迷南。/ 2023年09月30日 12:05/ 0 赞/ 35 阅读

相关 JavaScript单步调试

JavaScript单步调试作为前端开发人员，单步调试这一项技能往往被忽略，但是我依然觉得单步调试是一个非常实用并且基本的技能。当然，前端开发人员主要与JavaScri

ゝ一纸荒年。/ 2022年07月28日 01:29/ 0 赞/ 256 阅读

相关 JavaScript调试问题

常见错误：回归基础： 1、JavaScript是大小写敏感的，所以请检查你的大小写情况。 2、如果没有使用var来声明全局变量，它就会变成一个全局变量，那么它的

古城微笑少年丶/ 2022年06月11日 07:20/ 0 赞/ 168 阅读

相关【JavaScript】console控制台调试技巧 | JavaScript调试技巧

　　对于前端开发者来说，在开发过程中需要监控某些表达式或变量的值的时候，用 debugger 会显得过于笨重，取而代之则是会将值输出到控制台上方便调试。最常用的语句就是cons

分手后的思念是犯贱/ 2022年06月05日 05:42/ 0 赞/ 829 阅读

相关 IDEA调试JavaScript代码

1.使用插件 [JetBrains IDE Support][] 这里提供的是CSDN下载，离线安装版，也可以自己去翻墙去谷歌的插件市场下载安装。其他浏览器只要是使用谷

怼烎@/ 2022年05月23日 06:39/ 0 赞/ 221 阅读

相关 JavaScript 调试

JavaScript 调试 -------------------- 在编写 JavaScript 时，如果没有调试工具将是一件很痛苦的事情。 -----------

刺骨的言语ヽ痛彻心扉/ 2022年05月22日 12:52/ 0 赞/ 212 阅读

相关使用Chrome调试JavaScript

文章目录使用Chrome调试JavaScript 1 前言 2 认识DevTools 3 Source面板

深碍√TFBOYSˉ_/ 2022年04月16日 02:38/ 0 赞/ 440 阅读

相关 IDEA调试javaScript

谈起JavaScript调试，大家可能想到的就是FireFox下的FireBug，这毫无疑问，FireBug基本已经成为JavaScript开发人员的必备工具。在本文中，将向

一时失言乱红尘/ 2021年12月16日 02:51/ 0 赞/ 531 阅读

相关实用Javascript调试技巧

摘要：高效调试JS代码。原文：[实用Javascript调试技巧分享][Javascript] 作者：MudOnTire [Fundebug][]经授权转载

红太狼/ 2021年12月04日 00:13/ 0 赞/ 426 阅读