Code Inspector:点击页面元素自动定位到代码

Code Inspector是一个开发提效的神器

点击页面上的 DOM 元素,它能自动打开 IDE 并定位到 DOM 对应源代码位置

文档

  • https://inspector.fe-dev.cn/
  • https://github.com/zh-lx/code-inspector

目录

    • 1、安装
    • 2、配置
      • 2.1、webpack
      • 2.2、vue
      • 2.3、vite
    • 3、使用

1、安装

npm install code-inspector-plugin -D

2、配置

2.1、webpack

// webpack.config.js
const { CodeInspectorPlugin } = require('code-inspector-plugin');module.exports = () => ({plugins: [CodeInspectorPlugin({bundler: 'webpack',}),],
});

2.2、vue

// vue.config.js
const WebpackCodeInspectorPlugin = require('webpack-code-inspector-plugin');module.exports = {// ...other codechainWebpack: (config) => {// add this configuration in the development environmentconfig.plugin('webpack-code-inspector-plugin').use(new WebpackCodeInspectorPlugin());},
};

2.3、vite

// vite.config.js
import { defineConfig } from 'vite';
import { CodeInspectorPlugin } from 'code-inspector-plugin';export default defineConfig({plugins: [CodeInspectorPlugin({bundler: 'vite',}),],
});

3、使用

代码审查快捷键

  • Mac 系统默认组合键是 Option + Shift
  • Window 的默认组合键是 Alt + Shift

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

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

相关文章

入栏需看——学习记忆

记忆方法千千种,本栏意在梳理其中道道来,旦有小得,肥肠幸耶。从不同角度分析学习记忆。 逻辑篇 有逻辑 用思维导图 思维导图记忆有逻辑的文本/内容 理论 巧记书本结构–思维导图 模仿 HCIE-Cloud Computing LAB备考第一步&#xff1a…

Python基于Mirai开发的QQ机器人保姆式教程(亲测可用)

在本教程中,我们将使用Python和Mirai来开发一个QQ机器人,本文提供了三个教学视频,包教包会,本文也很贴心贴了代码和相关文件。话不多说,直接开始教学。 目录 一、安装配置MIrai 图片验证码报错: 二、机器…

vue-cli中总提示组件没有正确注册

这里写目录标题 一、报错提示二、修改办法 一、报错提示 二、修改办法 <template><div><aside-component style"width: 15%"></aside-component></div> </template><script> import AsideComponent from /components/Asi…

【学习方法论】学习的三种境界、三种习惯、三个要点,三个心态

学习的三种境界、三种习惯、三个要点&#xff0c;三个心态 三种学习境界 苦学 古人云&#xff1a;“头悬梁、锥刺股”&#xff0c;勤学苦练是第一境界。处于这种层次的同学&#xff0c;觉得学习枯燥无味&#xff0c;对他们来说学习是一种被迫行为&#xff0c;体会不到学习中的…

NATAPP使用详细教程(免费隧道内网映射)

NATAPP - https://natapp.cn/tunnel/lists NATAPP 在开发时可能会有将自己开发的机器上的应用提供到公网上进行访问&#xff0c;但是并不想通过注册域名、搭建服务器&#xff1b;由此可以使用natapp&#xff08;内网穿透&#xff09; 购买免费隧道 修改隧道配置 看自己的web…

JAVA毕业设计096—基于Java+Springboot+Vue的在线教育系统(源码+数据库+18000字论文)

基于JavaSpringbootVue的在线教育系统(源码数据库18000字论文)096 一、系统介绍 本系统前后端分离 本系统分为管理员、用户两种角色(管理员角色权限可自行分配) 用户功能&#xff1a; 注册、登录、课程预告、在线课程观看、学习资料下载、学习文章预览、个人信息管理、消息…

【计算机视觉项目实战】中文场景识别

✨专栏介绍&#xff1a; 经过几个月的精心筹备&#xff0c;本作者推出全新系列《深入浅出OCR》专栏&#xff0c;对标最全OCR教程&#xff0c;具体章节如导图所示&#xff0c;将分别从OCR技术发展、方向、概念、算法、论文、数据集等各种角度展开详细介绍。 &#x1f468;‍&…

【Two Stream network (Tsn)】(二) 阅读笔记

贡献 将深度神经网络应用于视频动作识别的难点&#xff0c;是如何同时利用好静止图像上的 appearance information以及物体之间的运动信息motion information。本文主要有三点贡献&#xff1a; 1.提出了一种融合时间流和空间流的双流网络&#xff1b; 2.证明了直接在光流上训…

【C++精华铺】10.STL string模拟实现

1. 序言 STL&#xff08;标准模板库&#xff09;是一个C标准库&#xff0c;其中包括一些通用的算法、容器和函数对象。STL的容器是C STL库的重要组成部分&#xff0c;它们提供了一种方便的方式来管理同类型的对象。其中&#xff0c;STLstring是一种常用的字符串类型。 STLstrin…

Docker如何安装seafile

SQLite 方式 要在 Docker 中安装 Seafile&#xff0c;您可以按照以下步骤进行操作&#xff1a; 安装 Docker&#xff1a;确保您的系统上已经安装了 Docker。您可以根据您的操作系统类型&#xff0c;在官方网站上找到适合您系统的 Docker 版本并进行安装。 下载 Seafile 镜像&…

解决Oracle数据库中日期格式不识别的问题

在数据库开发中&#xff0c;我们经常需要处理日期和时间数据。当我们在Oracle数据库中执行UPDATE语句时&#xff0c;可能会遇到ORA-01821错误&#xff0c;该错误表示提供的日期格式无法被数据库识别。本文将介绍如何解决Oracle数据库中日期格式不识别的问题。 问题分析&#x…

Unity设置TextMeshPro文本超出范围显示...

TextMtshPro文本超出范围&#xff0c;展示省略。选择Overflow为Ellipsis。

centroen 23版本换界面了

旧版本 新版本 没有与操作系统一起打包的ISO文件了&#xff0c;要么先安装系统&#xff0c;再安装Centreon&#xff0c;要么用pve导入OVF文件

Shell命令操作Linux文件系统

Shell命令操作Linux文件系统 文件夹介绍 文件夹常规命令 文件夹权限控制⭐ 文件类型和权限 修改文件权限 移动、复制、删除文件夹 文件夹介绍 Linux文件系统是计算机操作系统中的一个关键组成部分&#xff0c;它用于管理和组织计算机上的数据和信息。先到根目录&#xf…

支付宝使用OceanBase的历史库实践分享

为解决因业务增长引发的数据库存储空间问题&#xff0c;支付宝基于 OceanBase 数据库启动了历史库项目&#xff0c;通过历史数据归档、过期数据清理、异常数据回滚&#xff0c;实现了总成本降低 80%。 历史数据归档&#xff1a;将在线库&#xff08;SSD 磁盘&#xff09;数据归…

STDF-Viewer 解析工具说明

一、简介 1. 概述 STDF&#xff08;Standard Test Data Format&#xff09;&#xff08;标准测试数据格式&#xff09;是半导体测试行业的最主要的数据格式&#xff0c;包含了summary信息和所有测试项的测试结果&#xff1b;是半导体行业芯片测试数据的存储规范。 在半导体行业…

解决Nacos服务器连接问题:一次完整的排查经验分享

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

kakfa 3.5 kafka服务端处理消费者客户端拉取数据请求源码

一、服务端接收消费者拉取数据的方法二、遍历请求中需要拉取数据的主题分区集合&#xff0c;分别执行查询数据操作&#xff0c;1、会选择合适的副本读取本地日志数据(2.4版本后支持主题分区多副本下的读写分离) 三、会判断当前请求是主题分区Follower发送的拉取数据请求还是消费…

【笔试强训选择题】Day35.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01; 文章目录 前言 一、Da…