zh-lx / code-inspector Goto Github PK

使用之后页面input光标无法聚焦，导致无法输入

按照要求设置.env.local也不行，按住组合键时在页面有 DOM 遮罩筛选，不会打开vscode源码

Syntax Error: SyntaxError: Illegal tag name. Use '&lt;' to print '<'

现在我的仓库是 Monorepo 的，比如要本地启动 packages/A，现在 A 是 import 了 B 的，需要能够在页面上 跳转到 packages/B 的 代码里

因为 monorepo 在 yarn install 的时候把 packages 下的模块 symlink 到了 node_modules 下，所以现在是不支持跳转到 B 里的，

另外还需要映射到 packages B 的真实路径 pacakges/B/src/xxx，而不是 node_modules/B/src/xxx

我发现Astro已经在网页上添加源码位置信息了，但找了半天不知道如何使用

本地开发，修改文件，然后保存，loader花费时间比较长

开启cache后，修改文件，然后保存，花费时间

支持本地启动的 server 服务自定义 port 和 host

mac系统下，点击页面元素没反应，且终端控制台提示如下错误：

添加如下配置，点击跳转正常，建议在README中补充下：

因为我设置vscode在新窗口打开文件"window.openFilesInNewWindow": "on",，因此在使用该插件时会打开一个新的窗口。但实际上vscode的命令行有提供参数强制在当前编辑器打开：code -r xxx.ts

我觉得可以加个参数配置一下，不然我还得修改vscode的配置额。要是code命令的所有参数都支持配置那就更好了。

遮罩层出现防抖，优化用户体验

当前显性指定 editor 需要在 local.env 中指定，需要通过参数配置指定 editor

webpack cache 策略导致多次重新运行项目，不会重新启动 server

Invalid prop vc-path supplied to React.Fragment. React.Fragment can only have key and children props

如果一个MainFrame里面嵌入了一个router-view组件，查看这个组件里面的元素，只能定位到MainFrame这个vue文件，无法定位到router-view里面对应的组件的代码

我在一个vue-cli3 的vue2 的老项目里引用了。 用默认的配置直接卡死,就是到50%左右就不动了。

插件很棒,但是调试窗口一直告警如下:
[Vue warn]: Extraneous non-props attributes (vc-path) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

版本 0.0.12

支持 vscode 内置浏览器，直接打开对应代码文件，体验应该会更佳。

现在通过外部再调起 vscode，会闪一下。

另外，打开代码时替换了浏览器的窗口，打断了开发、浏览，如果检测有其他窗口时，能在非浏览器/当前窗口打开，体验就更丝滑了！

Idea 家族有众多产品，譬如开发.net的 Rider，如果自定义地添加，就会非常方便

请问兼容webpack3吗？我的一个webpack3项目引入了这个插件，但不起作用，浏览器控制台也没有快捷键提示。

如上图所示，会不会有其他框架也存在这种问题，虽然只是开发时的警告，但还是希望有办法去掉。比如增加配置，哪些组件不添加属性

1. 编译后的代码插入的html attribute似乎多了一个空格导致prettier报错。
   

2. 编译后的代码插入的html attribute 顺序也与vue/recommended eslint插件有兼容性问题。
   

点击后怎么跳转到webstorm内vue页， webstorm内需要怎么配置。 现在没有配置的情况下，自动跳转到vscode。

谢谢

npm i code-inspector-plugin -D
Debugger attached.
npm ERR! code E404
npm ERR! 404 Not Found - GET https://mirrors.huaweicloud.com/repository/npm/code-inspector-plugin
npm ERR! 404
npm ERR! 404 'code-inspector-plugin@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

页面上会始终呈现一个 click to open editor 的小框

经过判断是页面上这个元素code-inspector-component呈现的
十分抱歉，由于公司网络原因无法截图

webpack-code-inspector-plugin 0.0.10
nodejs 14.21.3
npm 6.14.18
operation win10
webpack 4.46.0
vue 3.2.39

考虑到团队合作中可能有人不想使用，所以增加一个参数，配置此参数后，只有 .env.local 有某个配置时才开启插件

现象：在 https://github.com/honghuangdc/soybean-admin 开源项目的基础上，引入本插件。点击任意导航栏，组件都无法正常加载，页面为空白。但是此时F5刷新页面后，页面恢复正常。

原因：猜测是多个根节点导致，因为之前版本一直报这个warning。

Linux下测试，打开了控制台内的vim，vscode已打开。

搜素结果

vscode 版本信息：

Version: 1.85.2 (user setup)
Commit: 8b3775030ed1a69b13e4f4c628c612102e30a681
Date: 2024-01-18T06:40:10.514Z
Electron: 25.9.7
ElectronBuildId: 26354273
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Windows_NT x64 10.0.22621

具体报错内容为：

原因是：本地启动时设置了NODE_OPTIONS: "--openssl-legacy-provider" 导致的，移除是可以的，但是我这边依赖这个NODE_OPTIONS，会导致项目的其他错误，是否可以加个配置项，你这边启动进程时不要继承父进程的这个NODE_OPTIONS

我看了下代码大概在这个地方：

感谢感谢！！！

工具看着很不错，不知道能否支持一下Hbuilder，用这个是因为可以实时调试，保存的时候自动刷新页面

插件说明：
https://hx.dcloud.net.cn/ExtensionTutorial/README?id=%e5%a6%82%e4%bd%95%e5%bc%80%e5%8f%91%e4%b8%80%e4%b8%aa%e6%8f%92%e4%bb%b6%ef%bc%9f

已在 0.0.10 版本修复，请安装以上版本

'wmic' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
Failed to recognize IDE automatically, add something like CODE_EDITOR=code to the .env.local file in your project folder, or add editor: "code" to CodeInspectorPlugin config, and then restart the development server. Learn more: https://goo.gl/MMTaZt

windows vscode
插件版本 0.1.12

你好，请问源码中，对于html文件的注入是必需的吗，ssr项目build产物不含html文件可以支持吗。
目前会在编译时报错：webpack-code-inspector-plugin Cannot find output HTML file

// 不依赖 html-webpack-plugin 注入代码
const injectCode = (
  code: string,
  assets: { [filename: string]: any },
  cb?: (params?: any) => void
) => {
  const files = Object.keys(assets).filter((name) => /\.html$/.test(name));
  if (!files.length) {
    if (cb) {
      ('webpack-code-inspector-plugin Cannot find output HTML file');
      cb(
        new Error('webpack-code-inspector-plugin Cannot find output HTML file')
      );
    }
  } else {
    files.forEach((filename: string) => {
      const source = assets[filename].source();
      const sourceCode = replaceHtml(source, code);
      assets[filename] = {
        source: () => sourceCode,
        size: () => sourceCode.length,
      };
    });
  }
};