[vue series] vue-devtools, о которых вы не знаете

Vue.js
[vue series] vue-devtools, о которых вы не знаете

vue-devtools используется давно.Во время использования я обнаружил, что панель vuex под vue-devtools очень мощная.Состояние всей страницы можно переключать на предыдущий временной узел по желанию.Исследование, недавно решил иди в яму учиться.

Я помню, что раньше в проекте Vue была онлайн-ошибка, потому что она обычно отключена для онлайн-проектов.vue-devtools, нельзя использовать напрямуюvue-devtoolsчтобы устранить проблему и найти решение путем исследования. Я считаю, что многие люди знают, как использоватьvue-devtoolsПосмотреть онлайн-проекты» сомнения.

В повседневном программировании некоторые разработчики не лезли на стену или им лень лезть на стену. не напрямуюchromeпоиск магазинаvue-devtoolsСкачать и установить, потом "Как установить не переворачивая стену?vue-devtools«Шерстяная ткань?

Сегодня поговорим о вещах, о которых вы, возможно, не знали.vue-devtools.

1. Путешествие во времени с vue-devtools — путешествие во времени

рекомендуется использоватьVuexПосле этого прочитайте этот модуль еще раз

Путешествие во времени — интересная идея. Общая теория относительности Эйнштейна утверждает, что путешествия во времени действительно возможны. Однако до сих пор не изобретены машины для путешествий во времени.

В передней части,Vuexучиться уFluxИдея одностороннего потока данных предполагает централизованное и унифицированное управление для сохранения состояния. Но эти состояния не меняются со временем. Чтобы состояние, возможно, захваченное, воспроизведенное или воспроизведенное, путешествовало назад и вперед во времени. Юда разработалvue-devtoolsТакой инструмент может помочь нашему приложению Vue совершить такое путешествие во времени!

Предпосылки для гарантированного путешествия во времени

VuexЭто достигается за счет следующих двух принципов:

  • одно дерево состоянийstore
  • только черезmutationизменить состояние

vue-devtoolsпанель просмотра

vue-devtoolsПоследняя версия, 5.0beta, привносит новые функции в инструмент отладки, добавляяRouting,Performance,SettingsПанель значительно повысила эффективность нашей разработки и отладки, и нужно сказать, что это артефакт.

v5.0beta

  • ComponentsПанель компонентов: проверка компонентов, фильтрация по компонентам, отображение исходного имени компонента, редактируемые данные компонента;
  • VuexПанель состояния: регистрация мутаций, фильтрация мутаций, сворачиваемая проверка состояния\геттеров\мутаций\действий\реквизита
  • EventsПанель событий: история событий, поиск событий по компонентам;
  • RoutingПанель маршрутизации: просмотр истории маршрутизации, сведений об изменении пути;
  • PerformanceПанель производительности: частота кадров в секунду, графики производительности рендеринга компонентов, статистика затрат времени и анализ функций жизненного цикла компонентов;
  • SettingsПанель настроек: настройте тему интерфейса инструмента, нормализуйте имя компонента и настройте макет интерфейса инструмента.

Путешествие во времени, о котором пойдет речь на этот раз, не является чем-то новым.time travelсуществуетVuexПанель состояния, давайте посмотримVuexшашка

путешествие во времени путешествие во времени (акцент)

VuexНа панели есть волшебная функция:time travel. Путешествие во времени возможно, потому что все изменения состояния могут быть сделаны только черезmutationсостояние, и каждое изменение состояния создает новыйstateобъект. меняй каждый разstateСобытия объекта записываются, показываяmutationСписок, когда вы хотите показать статус какого периода времени, просто переключитесь на этот период времениstateобъект.

Каждый раз, когда генерируется новое состояние, требуется глубокая копия объекта исходного состояния, чтобы гарантировать, что исходное состояние остается неизменным при каждом изменении состояния, а новое состояние используется.

time travelВнутренняя реализация процесса выглядит следующим образом.

Основные моменты vue-devtools-masterв исходном кодеtime travelВнутренняя реализация (v4.1.5).

(1) Триггерtime travel

vuexлевая сторона панелиmutationСписок, в каждой строке, когда мышь находится в строке, будут отображаться три маленьких значка, их функции:commitэтот разmutation, сброс настроекmutation, Путешествие во времени в это состояние.

Нажмите на маленький значок часов, чтобы активироватьvue-devtools-master 2/src/devtools/views/vuex/VuexHistory.vueвнизtimeTravelToфункция, операция представляет собойactionповедение.

(2) Триггерaction

Долженactionсуществуетvue-devtools-master 2/src/devtools/views/vuex/VuexHistory.vueсередина:

export function timeTravelTo ({ state, commit }, entry) {
  travelTo(state, commit, state.history.indexOf(entry))
}

function travelTo (state, commit, index) {
  const { history, base, inspectedIndex } = state
  const targetSnapshot = index > -1 ? history[index].snapshot : base

  // 更改当前 mutation 列表的选中行
  bridge.send('vuex:travel-to-state', stringify(parse(targetSnapshot).state))
  if (index !== inspectedIndex) {
    commit('INSPECT', index)
  }
  
  // 触发commit 操作
  commit('TIME_TRAVEL', index)
}

timeTravelToПри вызове выполнитьtravelToметод, этот метод в основном делает две вещи: во-первых, чтобы сказатьvue-devtools, изменено путешествие во времени панели vuex, вы можете изменить выбранный стиль и состояние; второе - вызватьcommitдействие, вызватьmutation.

(3) Триггерmutation

Обработка этой частиvue-devtools-master 2/src/devtools/views/vuex/module.jsсередина:

const mutaions = {
'INSPECT' (state, index) {
    state.inspectedIndex = index
  },
'TIME_TRAVEL' (state, index) {
    state.activeIndex = index
 }
}

const getters = {
  inspectedState ({ base, inspectedIndex }, getters) {
    const entry = getters.filteredHistory[inspectedIndex]
    const res = {}

    if (entry) {
      res.mutation = {
        type: entry.mutation.type,
        payload: entry.mutation.payload ? parse(entry.mutation.payload) : undefined
      }
    }

    const snapshot = parse(entry ? entry.snapshot : base)
    if (snapshot) {
      res.state = snapshot.state
      res.getters = snapshot.getters
    }

    return res
  },

  filteredHistory ({ history, filterRegex }) {
    return history.filter(entry => filterRegex.test(entry.mutation.type))
  }
}

INSPECTа такжеTIME_TRAVELизменится напрямуюinspectedIndexа такжеactiveIndex, который вызовет геттер при измененииinspectedStateпересчитать. Обязательно совершите это путешествие во времени и измените свой статус.

Полное путешествие во времени завершено, как насчет этого? Пройдя через эти вещи понять принцип, это не так сложно, как вы думаете.

2. Как использоватьVue DevtoolsОтладка онлайн-проектов Vue

онлайн-проект vuevue-devtoolsотключено, как использовать баг онлайн-проектаvue-devtoolsНасчет отладки.

Получить экземпляр Vue

Обычно исходный код vue упакован вvendor.xxx.jsфайл, а может и нет, вы можете перейти в инструменты разработчика ChromeSourcesНайдите его в панели, здесь для примера возьмем Наггетс.

  • в инструментах разработчика хромSourcesпанель, поискprototype.$nextTick;
  • Прервите точку на предыдущей строке кода и обновите страницу;
  • mn.prototype.$nextTickизmnЭто vue, который будет иметь разные имена в зависимости от упаковки и сжатия;
  • сохранить в консолиvueПример:vv = mn;;
  • Если сохранение не удалось, нажмите «Далее», чтобы выполнить несколько раз, пока создание экземпляра vue не будет завершено и экземпляр vue не будет сохранен.

включитьvue-devtoolsинструмент

  • Выполните код в консоли:vv.config.devtools = true;Если сообщается об ошибке, 80% — это то, что экземпляр vue не был завершен. Пожалуйста, продолжите выполнение на точке останова. пока он не сможет успешно работать.
  • Затем выполните код в консоли:__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', vv);,правильноvue-devtoolsдля инициализации.

  • Закройте консоль, откройте ее снова и увидите, что в консоли есть еще панели Vue.
  • Затем вы можете устранять неполадки столько, сколько хотите.

3. Не переворачивайте стену, установите вручную vue-devtools

Обычно, если мы хотимvueпроект, использоватьvue-devtoolsотладки инструмента, вы можете перейти кchromeмагазин, прямой поискvue-devtools, просто скачайте и установите, просто скачайте плагин прямо из магазина хрома и нужно перевернуть стену. Если переворачивать стену неудобно, можно использовать следующие шаги для ее ручной установки.

ended.jpg

  • оказатьсяvue-devtoolsпроект github, клонировать на локальный;
  • Перейдите в корневой каталог проекта и установите зависимостиnpm installилиcpm install;
  • оказатьсяvue-devtools/shells/chrome/manifest.jsonфайл, изменитьpersistentдляtrue;
  • Скомпилировать и построитьnpm run build;
  • Откройте браузер Chrome и введитеchrome://extensionsПерейдите на страницу расширения, нажмите加载已解压的扩展程序…выберитеvue-devtools>shells>chromeпапку (не забудьте включить режим разработчика
  • Vue.js devtoolsОн установлен, нажмите на карту расширения详细信息, проверьте три варианта ниже.

Наконец, не забудьте включить devtools в проекте!

new Vue({
  router,
  store,
  devtools: true, // 看这里 👀
  render: h => h(App)
}).$mount('#app');

详细信息

Ссылаться на

Категории