Оглавление

• Предисловие
• Знакомство с плагином
• Конкретное использование
  • Проект Vue2.6 + Vue Cli + Webpack5
• Подвести итог

Предисловие

Привет всем, я Мьюман. В современном процессе фронтенд-разработки мы обычно выбираем популярные на рынке фронтенд-фреймворки (такие как Vue, React и т. д.) для быстрой реализации различных функций. В отличие от традиционной разработки на основе JavaScript и jQuery, мы пишем код шаблона платформы вместо собственного кода HTML, CSS и JavaScript. Это приведет к тому, что код, который страница наконец увидит в элементе проверки консоли, будет отличаться от фактически написанного кода. отличается. Возьмем в качестве примера проекты Vue. Инструменты создания шаблонов обычно используются для компиляции и упаковки в HTML, CSS и JavaScript. Для завершения разработки вам нужно всего лишь написать синтаксический код Vue.

В этот момент возникает вопрос, а что, если я захочу найти на странице определенный DOM-элемент, соответствующий определенной строке файла Vue?

Согласно прошлой практике, вы можете использовать только плагин Devtools, официально предоставляемый Vue, чтобы увидеть, на какие компоненты ссылаются на странице. Однако это может дать только общее представление и не может конкретно определить положение конкретной строки.

Сегодня я представлю вам полезный плагин, который полностью решает проблему привязки элементов страницы браузера к соответствующим номерам строк кода IDE.

Знакомство с плагином

code-inspector-pluginЭто инструмент для разработки и отправки страниц, разработанный крупным парнем из команды внешнего интерфейса Kuaishou.。Конкретные функции этого плагина:,Когда вы нажмите на страницу DOM элемент, который может открываться автоматически IDE и установите курсор на DOM расположение исходного кода.

Согласно официальному представлению, он имеет следующие характеристики:

• Эффективность разработки: Нажмите на страницу DOM элемент, который может открываться автоматически IDE и установите курсор на DOM Расположение исходного кода значительно улучшает опыт и эффективность разработки;
• Простой и удобный в использовании: Исходный код не подвергается вторжению. Его нужно только ввести в пакетный инструмент, чтобы он вступил в силу. Весь процесс доступа так же прост, как питьевая вода;
• Сильная адаптивность: поддерживатьсуществоватьwebpack/vite/rspack/nextjs/nuxt/umijsиспользуется в,поддерживать vue/react/preact/solid/qwik/svelte/astro и другие рамки.

Можно сказать, что этот плагин очень мощный и поддерживает различные основные платформы и инструменты разработки, представленные на рынке.

Конкретное использование

Проект Vue2.6 + Vue Cli + Webpack5

Здесь я приведу пример проекта, который сейчас разрабатывается.,Стек технологий используетVue2.6 + Vue Cli + Webpack5。

Лично я использую pnpm. Здесь я использую pnpm для установки плагина:

pnpm add code-inspector-plugin -D

Затем откройтеvue.config.jsдокумент,Внедрение плагинови операции настройки плагина。НижеconfigureWebpackКак написать：

// Другие исходные конфигурации здесь опущены...
const { codeInspectorPlugin } = require('code-inspector-plugin');  // Внедрение плагинов
module.exports = defineConfig({
  // Другие исходные конфигурации здесь опущены...
  configureWebpack: {
    // Другие исходные конфигурации здесь опущены...
    plugins: [
      // Другие исходные конфигурации здесь опущены...
      codeInspectorPlugin({
        bundler: 'webpack', // Настроить плагин
      })
    ]
  }
});

Конфигурация плагина Webpack,Есть еще одинchainWebpackВот как это написано：

const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // Другие исходные конфигурации здесь опущены...
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};

Это все настроено!

После запуска проекта вы увидите в консоли следующее приглашение:

Включите функцию инспектора, удерживая нажатой клавишу Shift + ⌥option (щелкните элемент страницы, чтобы перейти к исходному коду редактора).

Поскольку я использую систему MacOS,Советshift + ⌥option。если тыWindowsпользователь,Соответствующий должен бытьshift + altключ。

Удерживая нажатой клавишу быстрого доступа, переместите указатель мыши на соответствующий элемент DOM, который вы хотите найти. Вы обнаружите, что стиль мыши изменится. Удерживайте нажатой клавишу быстрого доступа, не отпуская ее, и щелкните левой кнопкой мыши, чтобы найти строку кода. соответствующий файл VSCode!

Подвести итог

Я случайно обнаружил этот инструмент поиска кода, просматривая технологическое сообщество. Попользовавшись им некоторое время, я нашел его очень полезным, поэтому хотел бы поделиться им с вами! Я надеюсь, что вы сможете становиться все более и более эффективными в процессе фронтенд-разработки. Заканчивайте работу пораньше и уходите с работы пораньше!