【HTML】验证与调试工具

在这里插入图片描述

个人主页：Guiat
归属专栏：HTML CSS JavaScript

在这里插入图片描述

文章目录

  • 1. HTML 验证工具概述
    • 1.1 验证的重要性
    • 1.2 常见 HTML 错误类型
  • 2. W3C 验证服务
    • 2.1 W3C Markup Validation Service
    • 2.2 使用 W3C 验证器
    • 2.3 验证结果解读
  • 3. 浏览器开发者工具
    • 3.1 Chrome DevTools
      • 3.1.1 打开 Chrome DevTools
      • 3.1.2 主要功能
      • 3.1.3 Elements 面板使用技巧
    • 3.2 Firefox Developer Tools
      • 3.2.1 打开 Firefox Developer Tools
      • 3.2.2 特色功能
    • 3.3 Safari Web Inspector
      • 3.3.1 启用 Safari 开发菜单
      • 3.3.2 打开 Web Inspector
  • 4. HTML 代码质量工具
    • 4.1 HTMLHint
      • 4.1.1 安装 HTMLHint
      • 4.1.2 配置文件示例 (.htmlhintrc)
      • 4.1.3 使用 HTMLHint
    • 4.2 HTML-validate
      • 4.2.1 安装 HTML-validate
      • 4.2.2 配置文件示例 (.htmlvalidate.json)
      • 4.2.3 使用 HTML-validate
  • 5. 集成开发环境 (IDE) 插件
    • 5.1 Visual Studio Code 插件
      • 5.1.1 HTML 验证插件
      • 5.1.2 HTML 格式化插件
    • 5.2 WebStorm/IntelliJ IDEA 功能
    • 5.3 Sublime Text 插件
  • 6. 命令行工具
    • 6.1 HTML Tidy
      • 6.1.1 安装 HTML Tidy
      • 6.1.2 使用 HTML Tidy
      • 6.1.3 配置文件示例 (tidy.conf)
    • 6.2 Nu Html Checker (vnu.jar)
      • 6.2.1 安装 Nu Html Checker
      • 6.2.2 使用 Nu Html Checker
  • 7. 自动化测试集成
    • 7.1 CI/CD 集成
      • 7.1.1 GitHub Actions 示例
      • 7.1.2 GitLab CI 示例
    • 7.2 npm 脚本集成
  • 8. 可访问性验证工具
    • 8.1 WAVE (Web Accessibility Evaluation Tool)
      • 8.1.1 使用 WAVE
      • 8.1.2 WAVE 浏览器扩展
    • 8.2 axe DevTools
      • 8.2.1 安装 axe DevTools 浏览器扩展
      • 8.2.2 使用 axe-core 进行自动化测试
  • 9. 性能分析工具
    • 9.1 Google Lighthouse
      • 9.1.1 使用 Chrome DevTools 中的 Lighthouse
      • 9.1.2 Lighthouse CLI
    • 9.2 WebPageTest
      • 9.2.1 使用 WebPageTest
  • 10. 常见 HTML 问题及修复方法
    • 10.1 验证错误修复表
    • 10.2 HTML5 验证最佳实践
    • 10.3 调试技巧
  • 11. 完整验证流程示例
    • 11.1 开发阶段验证
    • 11.2 提交前验证
    • 11.3 部署前验证
    • 11.4 部署后监控

正文

1. HTML 验证工具概述

HTML 验证是确保网页代码符合 W3C 标准的过程，有助于提高网站的兼容性、可访问性和搜索引擎优化。

1.1 验证的重要性

HTML验证的主要优势提高兼容性     ████████████████████████ 80%
减少错误       ███████████████████████████ 90%
改善SEO        ██████████████████ 60%
提升性能       ███████████████ 50%
增强可访问性   ████████████████████ 65%[图表说明: █ 代表约 3% 的重要程度]

1.2 常见 HTML 错误类型

错误类型描述示例
标签未闭合缺少结束标签<div>内容
属性错误属性值未加引号或属性无效<img src=image.jpg>
嵌套错误标签嵌套顺序不正确<b><i>文本</b></i>
重复 ID页面中多个元素使用相同 ID多个 id="header"
非法字符使用未转义的特殊字符& 应为 &amp;

2. W3C 验证服务

W3C 验证服务是最权威的 HTML 验证工具，提供免费的在线验证。

2.1 W3C Markup Validation Service

<!-- 验证通过的 HTML 示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>验证示例</title>
</head>
<body><h1>Hello World</h1><p>这是一个<a href="https://example.com">链接</a>。</p>
</body>
</html>

2.2 使用 W3C 验证器

  1. 访问 W3C Markup Validation Service
  2. 选择验证方式：
    • 通过 URL 验证
    • 上传文件验证
    • 直接输入代码验证
  3. 提交验证并查看结果

2.3 验证结果解读

W3C 验证结果示例:错误: 第10行，元素 "img" 缺少必需的 "alt" 属性
<img src="logo.png">^警告: 第15行，考虑添加 "lang" 属性到 HTML 开始标签
<!DOCTYPE html><html>^

3. 浏览器开发者工具

现代浏览器内置的开发者工具是调试 HTML 的强大工具。

3.1 Chrome DevTools

3.1.1 打开 Chrome DevTools

  • Windows/Linux: F12 或 Ctrl+Shift+I
  • macOS: Cmd+Option+I
  • 或右键点击页面 > “检查”

3.1.2 主要功能

Chrome DevTools 主要面板:Elements - 检查和修改 HTML/CSS
Console - 查看日志和执行 JavaScript
Sources - 调试 JavaScript
Network - 分析网络请求
Performance - 性能分析
Application - 存储和缓存
Security - 安全信息

3.1.3 Elements 面板使用技巧

<!-- 在 Elements 面板中可以实时编辑 HTML -->
<div class="container"><h1 id="title">标题</h1><p class="content">内容</p>
</div>
  • 右键点击元素 > “Edit as HTML” 可直接编辑 HTML
  • 使用 Ctrl+F (或 Cmd+F) 在 HTML 中搜索
  • 使用 :hov 按钮模拟悬停等状态

3.2 Firefox Developer Tools

3.2.1 打开 Firefox Developer Tools

  • F12 或 Ctrl+Shift+I (Windows/Linux)
  • Cmd+Option+I (macOS)

3.2.2 特色功能

  • 可访问性检查器：分析页面的可访问性问题
  • 响应式设计模式：测试不同屏幕尺寸
  • 网络请求监控：分析加载性能

3.3 Safari Web Inspector

3.3.1 启用 Safari 开发菜单

  1. 打开 Safari 偏好设置
  2. 选择 “高级” 选项卡
  3. 勾选 “在菜单栏中显示开发菜单”

3.3.2 打开 Web Inspector

  • 开发 > 显示 Web Inspector
  • 或 Cmd+Option+I

4. HTML 代码质量工具

4.1 HTMLHint

HTMLHint 是一个静态代码分析工具，可以检测 HTML 代码中的问题。

4.1.1 安装 HTMLHint

# 全局安装
npm install -g htmlhint# 项目安装
npm install --save-dev htmlhint

4.1.2 配置文件示例 (.htmlhintrc)

{"tagname-lowercase": true,"attr-lowercase": true,"attr-value-double-quotes": true,"doctype-first": true,"tag-pair": true,"spec-char-escape": true,"id-unique": true,"src-not-empty": true,"attr-no-duplication": true,"title-require": true
}

4.1.3 使用 HTMLHint

# 验证单个文件
htmlhint index.html# 验证多个文件
htmlhint "src/**/*.html"

4.2 HTML-validate

HTML-validate 是一个更现代的 HTML 验证工具，支持 HTML5 和自定义规则。

4.2.1 安装 HTML-validate

npm install --save-dev html-validate

4.2.2 配置文件示例 (.htmlvalidate.json)

{"extends": ["html-validate:recommended"],"rules": {"element-required-attributes": "error","no-duplicate-id": "error","void-style": ["error", {"style": "selfclosing"}]}
}

4.2.3 使用 HTML-validate

npx html-validate index.html

5. 集成开发环境 (IDE) 插件

5.1 Visual Studio Code 插件

5.1.1 HTML 验证插件

  1. HTML Hint

    • 实时 HTML 验证
    • 自定义规则支持
    • 问题高亮显示

  2. W3C Validation

    • 使用 W3C 验证服务
    • 详细错误报告
    • 支持多种验证模式

  3. HTMLHint

    • 基于 HTMLHint 库
    • 自定义配置支持
    • 问题列表视图

5.1.2 HTML 格式化插件

  1. Prettier

    • 自动格式化 HTML
    • 可配置的格式规则
    • 保存时自动格式化

  2. HTML CSS Support

    • HTML 类和 ID 自动完成
    • CSS 属性提示
    • 文档结构分析

5.2 WebStorm/IntelliJ IDEA 功能

WebStorm 和 IntelliJ IDEA 内置了强大的 HTML 验证和调试功能：

  • 实时代码检查
  • 智能代码完成
  • HTML 结构可视化
  • 内置 W3C 验证
  • 与浏览器开发工具集成

5.3 Sublime Text 插件

  1. SublimeLinter-html-tidy

    • 基于 HTML Tidy 的验证
    • 实时错误标记
    • 自定义配置

  2. HTML-CSS-JS Prettify

    • 格式化 HTML 代码
    • 快捷键支持
    • 可自定义格式规则

6. 命令行工具

6.1 HTML Tidy

HTML Tidy 是一个经典的命令行工具，可以验证和修复 HTML 文件。

6.1.1 安装 HTML Tidy

# Ubuntu/Debian
sudo apt-get install tidy# macOS
brew install tidy-html5# Windows
# 下载安装包: https://github.com/htacg/tidy-html5/releases

6.1.2 使用 HTML Tidy

# 验证 HTML 文件
tidy -q -e index.html# 修复 HTML 文件
tidy -m index.html# 使用配置文件
tidy -config tidy.conf index.html

6.1.3 配置文件示例 (tidy.conf)

indent: auto
wrap: 80
markup: yes
output-xml: no
input-xml: no
show-warnings: yes
numeric-entities: yes
quiet: yes
show-body-only: no
fix-uri: yes

6.2 Nu Html Checker (vnu.jar)

Nu Html Checker 是 W3C 验证服务使用的同一个验证引擎，可以在本地运行。

6.2.1 安装 Nu Html Checker

# 下载 jar 文件
wget https://github.com/validator/validator/releases/download/latest/vnu.jar

6.2.2 使用 Nu Html Checker

# 验证单个文件
java -jar vnu.jar index.html# 验证多个文件
java -jar vnu.jar *.html# 验证整个目录
java -jar vnu.jar path/to/directory/

7. 自动化测试集成

7.1 CI/CD 集成

将 HTML 验证集成到持续集成/持续部署流程中。

7.1.1 GitHub Actions 示例

name: HTML Validationon:push:branches: [ main ]pull_request:branches: [ main ]jobs:validate:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- name: Setup Node.jsuses: actions/setup-node@v2with:node-version: '14'- name: Install dependenciesrun: npm install -g htmlhint- name: Validate HTMLrun: htmlhint "**/*.html"

7.1.2 GitLab CI 示例

html_validation:image: node:14stage: testscript:- npm install -g htmlhint- htmlhint "**/*.html"only:- merge_requests- main

7.2 npm 脚本集成

在 package.json 中添加验证脚本：

{"scripts": {"validate:html": "htmlhint \"src/**/*.html\"","test": "npm run validate:html"},"devDependencies": {"htmlhint": "^0.16.0"}
}

8. 可访问性验证工具

8.1 WAVE (Web Accessibility Evaluation Tool)

WAVE 是一个流行的网页可访问性评估工具。

8.1.1 使用 WAVE

  1. 访问 WAVE 网站
  2. 输入要检查的 URL
  3. 查看详细的可访问性报告

8.1.2 WAVE 浏览器扩展

  • Chrome 和 Firefox 扩展可用
  • 直接在页面上显示问题
  • 提供详细的错误说明和修复建议

8.2 axe DevTools

axe DevTools 是一个强大的可访问性测试工具。

8.2.1 安装 axe DevTools 浏览器扩展

  • 适用于 Chrome、Firefox 和 Edge
  • 提供详细的可访问性报告
  • 支持自动化测试集成

8.2.2 使用 axe-core 进行自动化测试

// 安装
npm install --save-dev axe-core// 在测试中使用
const axe = require('axe-core');// 运行可访问性测试
axe.run(document, {}, (err, results) => {if (err) throw err;console.log(results.violations);
});

9. 性能分析工具

9.1 Google Lighthouse

Lighthouse 是一个开源的自动化工具，用于改进网页质量。

9.1.1 使用 Chrome DevTools 中的 Lighthouse

  1. 打开 Chrome DevTools
  2. 切换到 Lighthouse 面板
  3. 选择要分析的类别（性能、可访问性、最佳实践、SEO）
  4. 点击"生成报告"

9.1.2 Lighthouse CLI

# 安装
npm install -g lighthouse# 使用
lighthouse https://example.com --view

9.2 WebPageTest

WebPageTest 提供详细的网页性能分析。

9.2.1 使用 WebPageTest

  1. 访问 WebPageTest
  2. 输入要测试的 URL
  3. 选择测试位置和浏览器
  4. 查看详细的性能报告

10. 常见 HTML 问题及修复方法

10.1 验证错误修复表

错误类型错误示例修复方法
未闭合标签<div>内容添加闭合标签：<div>内容</div>
属性引号缺失<img src=logo.png>添加引号：<img src="logo.png">
嵌套错误<b><i>文本</b></i>正确嵌套：<b><i>文本</i></b>
重复 ID多个 id="header"使用唯一 ID：id="main-header", id="sub-header"
缺少 alt 属性<img src="logo.png">添加 alt：<img src="logo.png" alt="公司标志">
非法字符AT&T使用实体：AT&amp;T
缺少 doctype直接以 <html> 开始添加 doctype：<!DOCTYPE html>

10.2 HTML5 验证最佳实践

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 验证示例</title>
</head>
<body><header><h1>网站标题</h1><nav><ul><li><a href="/">首页</a></li><li><a href="/about">关于</a></li></ul></nav></header><main><article><h2>文章标题</h2><p>文章内容</p><img src="image.jpg" alt="图片描述"></article></main><footer><p>&copy; 2023 公司名称</p></footer>
</body>
</html>

10.3 调试技巧

  1. 逐步排除法：注释掉部分代码，逐步找出问题所在
  2. 使用临时边框：添加 style="border: 1px solid red" 查看元素边界
  3. 检查父子关系：确保元素正确嵌套
  4. 验证特殊字符：检查非ASCII字符是否正确编码
  5. 检查大小写：HTML5 不区分大小写，但 XHTML 区分

11. 完整验证流程示例

以下是一个完整的 HTML 验证流程示例：

11.1 开发阶段验证

  1. 在 IDE 中使用实时验证插件
  2. 使用保存时自动格式化
  3. 定期运行 HTMLHint 或 HTML-validate

11.2 提交前验证

# 运行本地验证
npm run validate:html# 修复发现的问题
tidy -m index.html# 再次验证
npm run validate:html

11.3 部署前验证

  1. CI/CD 流程中自动验证
  2. 使用 W3C 验证服务进行最终检查
  3. 运行可访问性检查

11.4 部署后监控

  1. 使用 Lighthouse 监控性能和最佳实践
  2. 定期进行可访问性审查
  3. 监控用户反馈和错误报告

结语
感谢您的阅读！期待您的一键三连！欢迎指正！

在这里插入图片描述

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

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

相关文章

认识rand, srand, time函数，生成随机数

认识rand, srand, time函数，生成随机数

要完成猜数字游戏&#xff0c;首先要生成随机数&#xff0c;那么该怎么生成随机数&#xff1f;、 1.rand函数 rand函数是库函数&#xff0c;使用的时候要使用头文件stdlib.h c语言中&#xff0c;提供了rand函数来生成随机数&#xff0c;来看一下函数使用&#xff1a; 但是r…
阅读更多...
BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多变量时序预测（Matlab）

BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多变量时序预测（Matlab）

BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多变量时序预测&#xff08;Matlab&#xff09; 目录 BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多变量时序预测&#xff08;Matlab&#xff09;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多…
阅读更多...
Go语言从零构建SQL数据库引擎(2)

Go语言从零构建SQL数据库引擎(2)

SQL标准与数据库系统实现差异 在上一节中&#xff0c;我们了解了关系型数据库的基础概念。现在&#xff0c;让我们深入探讨SQL语言标准以及不同数据库系统之间的实现差异。 SQL语言的诞生与演进 想象你经营的咖啡店生意蒸蒸日上&#xff0c;需要一个更强大的系统来管理数据。…
阅读更多...
智能导诊系统的技术体系组成

智能导诊系统的技术体系组成

智能导诊系统的技术体系由基础支撑技术、核心交互技术、应用场景技术及安全保障技术构成&#xff0c;具体可归纳为以下六个维度&#xff1a; 一、基础支撑技术 1、AI大模型与深度学习 医疗大模型&#xff1a;如腾讯医疗AI、DeepSeek等&#xff0c;通过海量医学文献和病例训…
阅读更多...
QML输入控件: TextField（文本框）的样式定制

QML输入控件: TextField（文本框）的样式定制

目录 引言示例简介示例代码与关键点示例1&#xff1a;基础样式定制示例2&#xff1a;添加图标示例3&#xff1a;交互式元素&#xff08;清除按钮&#xff09; 实现要点总结完整工程下载 引言 在Qt Quick应用程序开发中&#xff0c;文本输入是最常见的用户交互方式之一。TextFi…
阅读更多...
leetcode hot100 多维动态规划

leetcode hot100 多维动态规划

1️⃣2️⃣ 多维动态规划&#xff08;区间 DP、状态机 DP&#xff09; 62. 不同路径 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图…
阅读更多...
3.27学习总结 爬虫+二维数组+Object类常用方法

3.27学习总结 爬虫+二维数组+Object类常用方法

高精度&#xff1a; 一个很大的整数&#xff0c;以字符串的形式进行接收&#xff0c;并将每一位数存储在数组内&#xff0c;例如100&#xff0c;即存储为[1][0][0]。 p2437蜜蜂路线 每一个的路线数前两个数的路线数相加。 #include <stdio.h> int a[1005][1005]; int …
阅读更多...
车载以太网网络测试-26【SOME/IP-通信方式-2】

车载以太网网络测试-26【SOME/IP-通信方式-2】

目录 1 摘要2 Method &#xff08;FF/RR&#xff09;、Event、Filed介绍2.1. SOME/IP Method 接口2.1.1 **Fire & Forget (FF)** - 单向调用2.1.2 **Request/Response (RR)** - 请求/响应模式2.1.3 **车载ECU通信实现示例**:2.1.4 **通信序列示例**2.1.5 实现注意事项 2.2 …
阅读更多...
把doi直接插入word中，然后直接生成参考文献

把doi直接插入word中，然后直接生成参考文献

这段代码通过提取、查询、替换DOI&#xff0c;生成参考文献列表来处理Word文档&#xff0c;可按功能模块划分&#xff1a; 导入模块 import re from docx import Document from docx.oxml.ns import qn from habanero import Crossref导入正则表达式模块re用于文本模式匹配&a…
阅读更多...
[C++] : C++11 右值引用的理解

[C++] : C++11 右值引用的理解

&#xff08;一&#xff09;什么是左值和右值&#xff1f; 传统的C语法中就有引用的语法&#xff0c;而C11中新增了的右值引用语法特性&#xff0c;所以从现在开始我们 之前学习的引用就叫做左值引用。无论左值引用还是右值引用&#xff0c;都是给对象取别名。 1.左值 左值是一…
阅读更多...
windows服务器切换到linux服务器踩坑点

windows服务器切换到linux服务器踩坑点

单节点环境依赖性 单节点问题&#xff0c;影响业务可用性&#xff0c;windows影响后续自动化&#xff0c;健壮性的提升&#xff0c;需要进行linux化 每个服务至少是双节点&#xff0c;防止单点故障&#xff0c;提升系统的可用性&#xff0c;健壮性。linux化后可以进行docker化…
阅读更多...
美颜SDK兼容性挑战：如何让美颜滤镜API适配iOS与安卓？

美颜SDK兼容性挑战：如何让美颜滤镜API适配iOS与安卓？

如何让美颜滤镜API同时适配iOS与Android&#xff0c;并确保性能流畅、效果一致&#xff0c;是开发者面临的一大挑战。今天&#xff0c;我将与大家一同深度剖析美颜SDK的跨平台兼容性问题&#xff0c;并分享优化适配方案。 一、美颜SDK兼容性面临的挑战 1.1不同平台的图像处理框…
阅读更多...
Vue3 表单

Vue3 表单

Vue3 表单 随着前端技术的发展，Vue.js 作为一款流行的前端框架，不断更新迭代，以适应更高效、更便捷的开发需求。Vue3 作为 Vue.js 的第三个主要版本，引入了许多新特性和改进，其中包括对表单处理机制的优化。本文将深入探讨 Vue3 表单的使用方法、技巧以及注意事项。 1. …
阅读更多...
笔记：代码随想录算法训练营day62：108.冗余连接、109.冗余连接II

笔记：代码随想录算法训练营day62：108.冗余连接、109.冗余连接II

学习资料&#xff1a;代码随想录 108. 冗余连接 卡码网题目链接&#xff08;ACM模式&#xff09; 判断是否有环的依据为&#xff0c;利用并查集&#xff0c;isSame函数&#xff0c;判断当下这条边的两个节点入集前是否为同根&#xff0c;如果是的话&#xff0c;该边就是会构…
阅读更多...
RK3588,V4l2 读取Gmsl相机, Rga yuv422转换rgb (mmap)

RK3588,V4l2 读取Gmsl相机, Rga yuv422转换rgb (mmap)

RK3588, 使用V4l2 读取 gmsl 相机，获得yuv422格式图像， 使用 rga 转换 rgb 图像。减少cpu占用率. 内存管理方式采用 mmap… 查看相机信息 v4l2-ctl --all -d /dev/cam0 , 查看自己相机分辨率，输出格式等信息,对应修改后续代码测试… Driver Info:Driver name : rkcif…
阅读更多...
Kubernetes》k8s》Containerd 、ctr 、cri、crictl

Kubernetes》k8s》Containerd 、ctr 、cri、crictl

containerd ctr crictl ctr 是 containerd 的一个客户端工具。 crictl 是 CRI 兼容的容器运行时命令行接口&#xff0c;可以使用它来检查和调试 k8s 节点上的容器运行时和应用程序。 ctr -v 输出的是 containerd 的版本&#xff0c; crictl -v 输出的是当前 k8s 的版本&#x…
阅读更多...
Vue 入门到实战 十一 Vuex

Vue 入门到实战 十一 Vuex

目录 11.1状态管理与应用场景 1&#xff09;state 2&#xff09;Getters 3&#xff09;Mutations 4&#xff09;Actions 5&#xff09;Module 11.2Vuex的安装与基本应用 11.3Vuex的核心概念 一句话解释vuex&#xff1a;就是单独成立一个组件&#xff0c;这个组件存储共…
阅读更多...
【YOLOv11】目标检测任务-实操过程

【YOLOv11】目标检测任务-实操过程

目录 一、torch环境安装1.1 创建虚拟环境1.2 启动虚拟环境1.3 安装pytorch1.4 验证cuda是否可用 二、yolo模型推理2.1 下载yolo模型2.2 创建模型推理文件2.3 推理结果保存路径 三、labelimg数据标注3.1 安装labelimg3.2 解决浮点数报错3.3 labelimg UI界面介绍3.4 数据标注案例…
阅读更多...
探索 Vue 中的多语言切换：＜lang-radio /＞ 组件详解！！！

探索 Vue 中的多语言切换：＜lang-radio /＞ 组件详解！！！

探索 Vue 中的多语言切换&#xff1a;<lang-radio /> 组件详解 &#x1f30d; 嗨&#xff0c;大家好&#xff01;&#x1f44b; 今天我们来聊聊如何在 Vue 项目中实现一个优雅的多语言切换功能——<lang-radio /> 组件。这是一个小而美的组件&#xff0c;出现在登…
阅读更多...
grafana 配置页面告警

grafana 配置页面告警

添加告警规则 1.登录grafana 点击 Alerting > Alert rules 点击 New alert rule 2.填写告警规则名字 3.配置告警规则 选择数据源为 Loki 单机 Builder 单机Label brower 单机 node_name 标签&#xff0c;选择一个主机&#xff0c;选好后单机 Show logs 这时候查询语…
阅读更多...
最新文章

Copyright @ 2022~2023