【VSCode】调试器debugger详细使用手册

news2024/11/18 6:03:02

Visual Studio Code 的主要功能之一是其出色的调试支持。VS Code 的内置调试器有助于加速您的编辑、编译和调试循环。
请添加图片描述

调试器扩展

VS Code 具有对Node.js运行时的内置调试支持，并且可以调试 JavaScript、TypeScript 或任何其他转换为 JavaScript 的语言。

开始调试

以下文档基于内置的Node.js调试器，但大部分概念和功能也适用于其他调试器。

在阅读有关调试的信息之前先创建一个示例 Node.js 应用程序会很有帮助。您可以按照Node.js 演练安装 Node.js 并创建一个简单的“Hello World”JavaScript 应用程序 ( app.js)。设置简单的应用程序后，此页面将带您了解 VS Code 调试功能。

var msg = 'Hello World';
console.log(msg);

运行视图

要打开运行视图，请在VS Code 一侧的活动栏中选择运行图标。您也可以使用键盘快捷键 ⇧⌘D。

在这里插入图片描述

运行视图显示与运行和调试相关的所有信息，并有一个带有调试命令和配置设置的顶栏。

如果尚未配置运行和调试（未launch.json创建），VS Code 将显示运行开始视图。

运行菜单

顶级运行菜单具有最常见的运行和调试命令：
在这里插入图片描述

启动配置

要在 VS Code 中运行或调试一个简单的应用程序，请在“调试”开始视图中选择“运行和调试”或按F5，VS Code 将尝试运行您当前活动的文件。

但是，对于大多数调试方案，创建启动配置文件是有益的，因为它允许您配置和保存调试设置详细信息。VS Code 将调试配置信息保存在launch.json位于.vscode工作区文件夹（项目根文件夹）或用户设置或工作区设置中的文件中。

要创建launch.json文件，请单击运行开始视图中的创建 launch.json 文件链接。

在这里插入图片描述

VS Code 将尝试自动检测您的调试环境，但如果失败，您将不得不手动选择它：
在这里插入图片描述

这是为 Node.js 调试生成的启动配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${file}"
    }
  ]
}

如果您返回文件资源管理器视图 (⇧⌘E )，您将看到 VS Code 已创建一个.vscode文件夹并将launch.json文件添加到您的工作区。

在这里插入图片描述

注意：即使您没有在 VS Code 中打开文件夹，也可以调试简单的应用程序，但无法管理启动配置和设置高级调试。如果您没有打开文件夹，则 VS Code 状态栏为紫色。

请注意，启动配置中可用的属性因调试器而异。您可以使用 IntelliSense 建议 ( ⌃Space ) 找出特定调试器存在哪些属性。悬停帮助也适用于所有属性。

不要假设一个调试器可用的属性也自动适用于其他调试器。如果您在启动配置中看到绿色曲线，请将鼠标悬停在上面以了解问题所在，并在启动调试会话之前尝试修复它们。

在这里插入图片描述
查看所有自动生成的值，并确保它们对您的项目和调试环境有意义。

启动与附加配置

在 VS Code 中，有两种核心调试模式Launch和Attach，它们分别处理两个不同的工作流程和开发人员细分。根据您的工作流程，知道哪种类型的配置适合您的项目可能会令人困惑。

如果您来自浏览器开发者工具背景，您可能不习惯“从您的工具启动”，因为您的浏览器实例已经打开。当您打开 DevTools 时，您只是将DevTools 附加到您打开的浏览器选项卡。另一方面，如果您来自服务器或桌面背景，让您的编辑器为您启动进程是很正常的，并且您的编辑器会自动将其调试器附加到新启动的进程。

解释启动和附加之间区别的最佳方法是将启动配置视为如何在VS Code 附加到它之前以调试模式启动应用程序的秘诀，而附加配置是如何连接 VS Code 的秘诀调试器到已经运行的应用程序或进程。

VS Code 调试器通常支持在调试模式下启动程序或在调试模式下附加到已经运行的程序。根据请求（attach或launch），需要不同的属性，VS Code 的launch.json验证和建议应该对此有所帮助。

添加新配置

要将新配置添加到现有配置launch.json，请使用以下技术之一：

  • 如果您的光标位于配置数组内，请使用 IntelliSense。
  • 按添加配置按钮以在数组开头调用片段 IntelliSense。
  • 在运行菜单中选择添加配置选项。
    请添加图片描述

VS Code 还支持同时启动多个配置的复合启动配置；

为了启动调试会话，首先使用运行视图中的配置下拉菜单选择名为启动程序的配置。设置好启动配置后，使用F5启动调试会话。

或者，您可以通过命令面板( ⇧⌘P ) 运行配置，方法是过滤调试：选择并开始调试或键入’debug '并选择要调试的配置。

一旦调试会话开始，就会显示DEBUG CONSOLE面板并显示调试输出，并且状态栏会改变颜色（默认颜色主题为橙色）：

请添加图片描述

此外，调试状态会出现在状态栏中，显示活动的调试配置。通过选择调试状态，用户可以更改活动启动配置并开始调试，而无需打开运行视图。
调试状态

调试操作

一旦调试会话开始，调试工具栏将出现在编辑器的顶部。

请添加图片描述

  • 继续/暂停F5
  • 跨过F10
  • 步入F11
  • 退出⇧F11
  • 重启⇧⌘F5
  • 停止⇧F5

提示：使用设置debug.toolBarLocation来控制调试工具栏的位置。它可以是默认的floating，docked运行视图，或hidden. 调试工具栏可以floating水平拖动，也可以向下拖动到编辑器区域。

运行模式

除了调试程序，VS Code 还支持运行程序。Debug: Run (Start without Debugging)操作由⌃F5触发并使用当前选择的启动配置。“运行”模式支持许多启动配置属性。VS Code 在程序运行时维护一个调试会话，按下停止按钮会终止程序。

提示：运行操作始终可用，但并非所有调试器扩展都支持“运行”。在这种情况下，“运行”将与“调试”相同。

断点

可以通过单击编辑器边距或在当前行上使用F9来切换断点。可以在 Run 视图的BREAKPOINTS部分中进行更精细的断点控制（启用/禁用/重新应用）。

  • 编辑器边距中的断点通常显示为红色实心圆圈。
  • 禁用的断点有一个实心灰色圆圈。
  • 当调试会话开始时，无法注册到调试器的断点会变为灰色的空心圆圈。如果在不支持实时编辑的调试会话正在运行时编辑源代码，也会发生同样的情况。

如果调试器支持中断不同类型的错误或异常，这些也将在BREAKPOINTS视图中可用。

Reapply All Breakpoints命令将所有断点再次设置到其原始位置。如果您的调试环境是“惰性的”并且在尚未执行的源代码中“错位”断点，这将很有帮助。
请添加图片描述

或者，可以通过启用设置在编辑器的概览标尺中显示断点debug.showBreakpointsInOverviewRuler：

概览标尺中的断点
请添加图片描述

日志点

日志点是断点的变体，它不会“中断”到调试器中，而是将消息记录到控制台。日志点对于在调试无法暂停或停止的生产服务器时注入日志记录特别有用。

日志点由“菱形”形图标表示。日志消息是纯文本，但可以包含要在花括号 (’{}’) 内计算的表达式。
请添加图片描述
就像常规断点一样，可以启用或禁用日志点，也可以通过条件和/或命中计数来控制。

注意：日志点由 VS Code 的内置 Node.js 调试器支持，但可以由其他调试扩展实现。

数据检查

可以在“运行”视图的VARIABLES部分中检查变量，也可以将鼠标悬停在编辑器中的源上。变量值和表达式评估与CALL STACK部分中选定的堆栈帧相关。
请添加图片描述
可以使用变量上下文菜单中的“设置值”操作修改变量值。此外，您可以使用Copy Value操作来复制变量的值，或使用Copy as Expression操作来复制表达式以访问变量。

变量和表达式也可以在运行视图的WATCH部分进行评估和观察。

请添加图片描述
当焦点位于VARIABLES部分时，可以通过键入来过滤变量名称和值。
请添加图片描述

Launch.json 属性

有许多launch.json属性可以帮助支持不同的调试器和调试方案。如上所述，一旦为属性指定了值，就可以使用 IntelliSense ( ⌃Space ) 查看可用属性的列表type。
请添加图片描述
每个启动配置都必须具有以下属性：

  • type- 用于此启动配置的调试器类型。每个安装的调试扩展都引入了一种类型：node例如，用于内置的 Node 调试器，或者php用于goPHP 和 Go 扩展。
  • request- 此启动配置的请求类型。目前，launch并attach受支持。
  • name- 出现在调试启动配置下拉列表中的易于阅读的名称。

以下是可用于所有启动配置的一些可选属性：

  • presentation- 使用对象中的order、group和hidden属性presentation，您可以在调试配置下拉列表和调试快速选择中对配置和化合物进行排序、分组和隐藏。
  • preLaunchTask- 要在调试会话开始之前启动任务，请将此属性设置为tasks.json中指定的任务的标签（在工作区的.vscode文件夹中）。或者，可以将其设置${defaultBuildTask}为使用您的默认构建任务。
  • postDebugTask- 要在调试会话结束时启动任务，请将此属性设置为tasks.json中指定的任务的名称（在工作区的.vscode文件夹中）。
  • internalConsoleOptions- 此属性控制调试会话期间调试控制台面板的可见性。
  • debugServer-仅适用于调试扩展作者：此属性允许您连接到指定端口，而不是启动调试适配器。
  • serverReadyAction- 如果您想在正在调试的程序向调试控制台或集成终端输出特定消息时在 Web 浏览器中打开 URL。有关详细信息，请参阅下面的调试服务器程序时自动打开 URI部分。

许多调试器支持以下一些属性：

  • program- 启动调试器时运行的可执行文件或文件
  • args- 传递给程序进行调试的参数
  • env- 环境变量（该值null可用于“取消定义”变量）
  • envFile- 带有环境变量的 dotenv 文件的路径
  • cwd- 用于查找依赖项和其他文件的当前工作目录
  • port- 附加到正在运行的进程时的端口
  • stopOnEntry- 程序启动时立即中断
  • console- 使用哪种控制台，例如internalConsole、integratedTerminal或externalTerminal

变量替换

VS Code 将常用路径和其他值作为变量提供，并支持在launch.json. 这意味着您不必在调试配置中使用绝对路径。例如， w o r k s p a c e F o l d e r 给 出 工 作 区 文 件 夹 的 根 路 径 、 {workspaceFolder}给出工作区文件夹的根路径、 workspaceFolder给出工作区文件夹的根路径、{file}在活动编辑器中打开的文件以及${env:Name}环境变量“名称”。您可以在变量参考launch.json中或通过在字符串属性中调用 IntelliSense来查看预定义变量的完整列表。

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

特定于平台的属性

Launch.json支持定义取决于运行调试器的操作系统的值（例如，要传递给程序的参数）。为此，请将特定于平台的文字放入launch.json文件中，并在该文字中指定相应的属性。

下面是一个在 Windows 上以不同方式传递"args"给程序的示例：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "args": ["myFolder/path/app.js"],
      "windows": {
        "args": ["myFolder\\path\\app.js"]
      }
    }
  ]
}

有效的操作属性适用"windows"于 Windows、"linux"Linux 和"osx"macOS。在操作系统特定范围中定义的属性会覆盖在全局范围中定义的属性。

请注意，该type属性不能放在特定于平台的部分中，因为type在远程调试场景中间接确定了平台，这将导致循环依赖。

在下面的示例中，调试程序总是在进入时停止，但在 macOS 上除外：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
      "stopOnEntry": true,
      "osx": {
        "stopOnEntry": false
      }
    }
  ]
}

全局启动配置

VS Code 支持"launch"在您的用户设置中添加对象。然后，此"launch"配置将在您的工作区中共享。例如：

"launch": {
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${file}"
    }]
}

高级断点主题

条件断点

一个强大的 VS Code 调试功能是能够根据表达式、命中计数或两者的组合设置条件。

  • 表达式条件：只要表达式求值为 ，就会触发断点true。
  • 命中计数：“命中计数”控制断点在“中断”执行之前需要命中多少次。是否尊重“命中计数”以及表达式的确切语法因调试器扩展而异。

您可以在创建源断点（使用添加条件断点操作）或修改现有断点（使用编辑条件操作）时添加条件和/或命中计数。在这两种情况下，都会打开一个带有下拉菜单的内联文本框，您可以在其中输入表达式：
命中计数

函数和异常断点也支持条件和命中计数编辑。您可以从上下文菜单或新的内联编辑条件操作启动条件编辑。

BREAKPOINTS视图 中的条件编辑示例：
条件编辑

如果调试器不支持条件断点，则添加条件断点和编辑条件操作将丢失。

内联断点

仅当执行到达与内联断点关联的列时，才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。

可以使用⇧F9或在调试会话期间通过上下文菜单设置内联断点。内联断点在编辑器中内联显示。

内联断点也可以有条件。可以通过编辑器左边距的上下文菜单在一行上编辑多个断点。

函数断点

调试器可以通过指定函数名称来支持创建断点，而不是直接在源代码中放置断点。这在源不可用但函数名称已知的情况下很有用。

通过按BREAKPOINTS部分标题中的+按钮并输入函数名称来创建函数断点。函数断点在BREAKPOINTS部分中以红色三角形显示。

数据断点

如果调试器支持数据断点，则可以从VARIABLES视图设置它们，并在底层变量的值更改时受到影响。数据断点在BREAKPOINTS部分以红色六边形显示。

调试控制台 REPL

可以使用调试控制台REPL ( Read-Eval-Print Loop ) 功能评估表达式。要打开调试控制台，请使用调试窗格顶部的调试控制台操作或使用查看：调试控制台命令 ( ⇧⌘Y )。在您按Enter后计算表达式，并且调试控制台 REPL 在您键入时显示建议。如果您需要输入多行，请在各行之间使用Shift+Enter ，然后使用Enter发送所有行进行评估。调试控制台输入使用活动编辑器的模式，这意味着调试控制台输入支持语法着色、缩进、引号自动关闭和其他语言功能。
调试控制台
注意：您必须处于正在运行的调试会话中才能使用调试控制台 REPL。

重定向输入/输出到/从调试目标

重定向输入/输出是特定于调试器/运行时的，因此 VS Code 没有适用于所有调试器的内置解决方案。

以下是您可能要考虑的两种方法：

  1. 在终端或命令提示符下手动启动程序进行调试（“调试目标”），并根据需要重定向输入/输出。确保将适当的命令行选项传递给调试目标，以便调试器可以附加到它。创建并运行附加到调试目标的“附加”调试配置。

  2. 如果您使用的调试器扩展可以在 VS Code 的集成终端（或外部终端）中运行调试目标，您可以尝试将 shell 重定向语法（例如，“<”或“>”）作为参数传递。

这是一个示例launch.json配置：

{
  "name": "launch program that reads a file from stdin",
  "type": "node",
  "request": "launch",
  "program": "program.js",
  "console": "integratedTerminal",
  "args": ["<", "in.txt"]
}

这种方法要求“<”语法通过调试器扩展并最终在集成终端中未经修改。

多目标调试

对于涉及多个进程的复杂场景（例如，客户端和服务器），VS Code 支持多目标调试。

使用多目标调试很简单：启动第一个调试会话后，您可以启动另一个会话。一旦第二个会话启动并运行，VS Code UI 就会切换到多目标模式：

  • 现在，各个会话在CALL STACK视图中显示为顶级元素。
    调用堆栈视图

  • 调试工具栏显示当前活动的会话（所有其他会话都在下拉菜单中可用）。
    调试操作小部件

  • 调试操作（例如，调试工具栏中的所有操作）在活动会话上执行。可以使用调试工具栏中的下拉菜单或通过在CALL STACK视图中选择不同的元素来更改活动会话。

复合发射配置

启动多个调试会话的另一种方法是使用复合启动配置。复合启动配置列出了应该并行启动的两个或多个启动配置的名称。可以选择preLaunchTask指定在各个调试会话开始之前运行的 a。布尔标志stopAll控制手动终止一个会话是否会停止所有复合会话。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": ["Server", "Client"],
      "preLaunchTask": "${defaultBuildTask}",
      "stopAll": true
    }
  ]
}

复合启动配置显示在启动配置下拉菜单中。

远程调试

VS Code 本身不支持远程调试：这是您正在使用的调试扩展的一项功能，您应该在Marketplace中查阅扩展的页面以获取支持和详细信息。

但是，有一个例外：VS Code 中包含的 Node.js 调试器支持远程调试。请参阅Node.js 调试主题以了解如何配置它。

调试服务器程序时自动打开 URI

开发 Web 程序通常需要在 Web 浏览器中打开特定的 URL，以便在调试器中访问服务器代码。VS Code 有一个内置功能“ serverReadyAction ”来自动执行此任务。

下面是一个简单的Node.js Express应用程序示例：

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('Hello World!');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

此应用程序首先为“/” URL 安装“Hello World”处理程序，然后开始在端口 3000 上侦听 HTTP 连接。该端口在调试控制台中公布，通常，开发人员现在将http://localhost:3000在他们的浏览器应用程序中键入。

serverReadyAction功能可以将结构化属性添加到serverReadyAction任何启动配置并选择要执行的“操作”：

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

这里的pattern属性描述了用于匹配宣布端口的程序输出字符串的正则表达式。端口号的模式放在括号中，以便它可用作正则表达式捕获组。在此示例中，我们仅提取端口号，但也可以提取完整的 URI。

该uriFormat属性描述了端口号如何转换为 URI。第一个%s被匹配模式的第一个捕获组替换。

然后使用为 URI 方案配置的标准应用程序在 VS Code 之外（“外部”）打开生成的 URI。

通过 Edge 或 Chrome 触发调试

action可以设置为debugWithEdge或debugWithChrome。在这种模式下，webRoot可以添加一个传递给 Chrome 或 Edge 调试会话的属性。

为了简化一点，大多数属性都是可选的，我们使用以下后备值：

  • 模式："listening on.* (https?://\\S+|[0-9]+)"匹配常用消息“正在侦听端口 3000”或“正在侦听：https://localhost:5001”。
  • uri格式："http://localhost:%s"
  • 网络根："${workspaceFolder}"

触发任意启动配置

在某些情况下，您可能需要为浏览器调试会话配置其他选项——或者完全使用不同的调试器。您可以通过将属性设置为启动配置的名称来执行此操作，以便action在匹配时启动。startDebuggingnamepattern

命名的启动配置必须与带有serverReadyAction.

这里的serverReadyAction功能在起作用：
服务器就绪功能正在运行

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409624.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )

【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )

文章目录一、权重叠加计算公式1、后代选择器权重计算2、后代选择器权重计算二3、链接伪类选择器权重计算二、代码示例1、标签结构2、后代选择器选择案例 12、后代选择器选择案例 23、后代选择器选择案例 3一、权重叠加计算公式 在使用 多个类型的 基础选择器 进行 组合 时 , 如…
阅读更多...
【JavaScript】手撕前端面试题：手写new操作符 | 手写Object.freeze

【JavaScript】手撕前端面试题：手写new操作符 | 手写Object.freeze

&#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总结&…
阅读更多...
HttpServletRequest 获取参数

HttpServletRequest 获取参数

1　HttpServletRequest获取参数方法 可以使用HttpServletRequest获取客户端的请求参数&#xff0c;相关方法如下&#xff1a; String getParameter(String name)&#xff1a;通过指定名称获取参数值&#xff1b;String[] getParameterValues(String name)&#xff1a;通过指定名…
阅读更多...
new bing 申请加入候补

new bing 申请加入候补

最近Chatgpt非常的火爆&#xff0c; 微软也是把新版必应Chatgpt的测试版已经推出。1.下载安装新必应(new bing)需要下载 Edge新版本 Edge dev下载链接: Microsoft Edge 预览体验成员 (microsoftedgeinsider.com)安装插件在设置中找到扩展-> 获取Microsoft Edge扩展搜索获取 …
阅读更多...
vue中的nexttick

vue中的nexttick

我们了解nexttick之前&#xff0c;我们先来看一个例子。 我们先要每一次都在点击按钮的时候&#xff0c;都进行字符串的累加操作&#xff0c;并且在该函数中计算该字符串所占的高度offsetHeight&#xff0c;但是我们当进行第一次点击的时候&#xff0c;此时打印的结果不符合,因…
阅读更多...
Javascript Object和Map之间的转换

Javascript Object和Map之间的转换

简单的区分Map和Object Map是ES6退出的一个类型&#xff0c;特点&#xff1a;任何值都可作为属性名 Object特点&#xff1a;属性名只能是字符串(一开始我也不信&#xff0c;测试后才发现的) 代码图片创建一个map类型 new Map([[key, value],[key1, value1] ])简单的介绍下面…
阅读更多...
vue 获取后端数据

vue 获取后端数据

目录 proxy 解决本地请求问题 vite Vue CLI fetch 代码演示 Post请求 ​编辑Get请求 Axios 安装 代码演示 Post请求 Get请求 TS 封装Axios 代码演示 proxy 解决本地请求问题 为什么会出现跨域问题? 浏览器的同源策略 首先给出浏览器“同源策略”的一种经典定义…
阅读更多...
this.$router.push跳转页面携带参数

this.$router.push跳转页面携带参数

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、params和query使用方式二、实现代码1.index.js代码2.test.vue代码3.testParams代码4.testParams代码5.效果总结前言 this.$router.push进行页面跳转时。携带…
阅读更多...
Vue.js安装与创建默认项目（详细步骤）

Vue.js安装与创建默认项目（详细步骤）

前言 上一篇博文已经对Node.js的安装与配置进行了详细介绍&#xff0c;详见https://blog.csdn.net/qq_42006801/article/details/124830995 另外&#xff1a;文中项目存放的路径及项目名称可根据自身实际情况进行更改。 一、Vue.js简述 Vue是一套用于构建用户界面的渐进式Ja…
阅读更多...
基于React的富文本编辑器——Braft Editor使用

基于React的富文本编辑器——Braft Editor使用

antd 是基于 Ant Design 设计规范实现的 高质量 React 组件库&#xff0c;倾向于只提供符合该规范且带有视觉展现的 UI 组件&#xff0c;也尽量不重复造轮子。 如果要在React项目中使用富文本编辑器&#xff0c;官方推荐使用 react-quill 与 braft-editor。 详细点击这里 这篇…
阅读更多...
Vue3.0项目——打造企业级音乐App（二）图片懒加载、v-loading指令的开发和优化

Vue3.0项目——打造企业级音乐App（二）图片懒加载、v-loading指令的开发和优化

系列文章目录 内容参考链接Vue3.0 项目启动Vue3.0 项目启动&#xff08;打造企业级音乐App&#xff09;Vue3.0项目——打造企业级音乐App&#xff08;一&#xff09;Tab栏、轮播图、歌单列表、滚动组件Vue3.0项目——打造企业级音乐App&#xff08;二&#xff09;图片懒加载、…
阅读更多...
「Vue面试题」vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

「Vue面试题」vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

文章目录一、是什么二、如何做接口权限路由权限控制菜单权限方案一方案二按钮权限方案一方案二小结参考文章一、是什么 权限是对特定资源的访问许可&#xff0c;所谓权限控制&#xff0c;也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权&#xff0c;…
阅读更多...
Code For Better 谷歌开发者之声——谷歌Web工具包(GWT)

Code For Better 谷歌开发者之声——谷歌Web工具包(GWT)

&#x1f34e;个人主页&#xff1a;亮点菌的博客 &#x1f34a;个人信条&#xff1a;点亮编程之路&#xff0c;做自己的亮点 文章目录一、GWT简介二、运行模式1、开发模式&#xff08;以前称为托管模式&#xff09;2、生产模式&#xff08;以前称为Web模式&#xff09;三、组件…
阅读更多...
前端开发：JS的事件冒泡和事件捕获详解

前端开发：JS的事件冒泡和事件捕获详解

前言 在前端开发过程中&#xff0c;关于JS原生的核心内容使用是日常工作中的常态&#xff0c;关于底层和原理的掌握使用&#xff0c;尤其是在性能优化方面甚为重要。作为前端开发的进阶内容&#xff0c;在实际开发过程中事件发生的顺序称为事件流&#xff0c;当触发某个事件的时…
阅读更多...
微信小程序使用 npm 包，举例图文详解

微信小程序使用 npm 包，举例图文详解

使用 npm 包前提条件&#xff1a; 下载安装&#xff0c;配置npm环境变量&#xff0c;不懂得可以上网查教程&#xff0c;本文不再描述 小程序使用 npm 包简述 1、初始化 package.json 2、勾选允许使用 npm&#xff08;新版微信小程序开发工具忽略这一步&#xff09; 3、下载…
阅读更多...
Auto.js的介绍

Auto.js的介绍

Auto.js 是一款无需root权限的javascript自动化软件 auto.js是一款安卓手机应用&#xff0c;和微信一样&#xff0c;安装在手机上使用 Auto.is是一款自动化软件&#xff0c;更根据脚本内容便可自动执行相关的操作&#xff0c;并且手机无需root Auto.js的脚本需要使用JavaScri…
阅读更多...
Vue中的v-for循环，实现div块的循环生成

Vue中的v-for循环，实现div块的循环生成

前言 大家好,这里是果力成,老规矩,学之!最近在做前端页面遇到一个小问题&#xff0c;说来也不难&#xff0c;但还是花费了我的好些时间&#xff0c;保持习惯记录一下。在前端学习中不免遇到一个div或者一个数组的循环产生&#xff0c;因为挨个儿传数据显然不是最优的。这里讲述…
阅读更多...
强大的图片预览组件Viewer.js

强大的图片预览组件Viewer.js

​ 1、 Viewer.js简介 Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能&#xff0c;同时&#xff0c;这款优秀的插件配置操作起来也非常的方便。 Viewer.js分为2个版本&#xff0c;js版本和jquery版本&#xff0c;下载地址分别为 纯J…
阅读更多...
uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内

uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内

我在做uniapp项目时&#xff0c;用的uni-file-picker组件&#xff0c;这是我做的一个项目实例&#xff0c;主要是将图片通过接口传至后台服务器 如果只是上传一张照片的话 还没有什么大问题&#xff0c;但是如果一连上传很多个图片&#xff0c;像我这个项目一样&#xff0c;而且…
阅读更多...
一文搞懂ES6的Map

一文搞懂ES6的Map

什么是Map Map是ECMAScript 6 的新增特性&#xff0c;是一种新的集合类型&#xff0c;为javascript带来了真正的键/值存储机 制。 Map 对象存有键值对&#xff0c;其中的键可以是任何数据类型。 Map 对象记得键的原始插入顺序。 Map 对象具有表示映射大小的属性。 Map的基…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023