Что это такое?
Лёгкий расширяемый инструмент для фронтенд-разработчиков, чтобы отлаживать мобильные веб-страницы: консоль прямо на странице, которая показывает логи, сетевые запросы, элементы и хранилище прямо на телефоне.
Лёгкий расширяемый инструмент для фронтенд-разработчиков, чтобы отлаживать мобильные веб-страницы: консоль прямо на странице, которая показывает логи, сетевые запросы, элементы и хранилище прямо на телефоне.Это расширение для браузера или код, который я добавляю на свою страницу?Код, который вы добавляете в свой проект, а не расширение: он не привязан к фреймворкам, работает во Vue, React или любом другом фреймворке и отрисовывает свою консоль прямо на странице.
Код, который вы добавляете в свой проект, а не расширение: он не привязан к фреймворкам, работает во Vue, React или любом другом фреймворке и отрисовывает свою консоль прямо на странице.Как добавить его в проект?Два способа: npm install vconsole (рекомендуется) и импортировать его, либо подключить CDN-скрипт через тег в HTML.
Два способа: npm install vconsole (рекомендуется) и импортировать его, либо подключить CDN-скрипт через тег в HTML.Нужно ли что-то особенное установить, чтобы пользоваться им?Ничего особенного: это обычный npm-пакет с небольшими рантайм-зависимостями (core-js, @babel/runtime, copy-text-to-clipboard), и не нужно запускать никакой сервер.
Ничего особенного: это обычный npm-пакет с небольшими рантайм-зависимостями (core-js, @babel/runtime, copy-text-to-clipboard), и не нужно запускать никакой сервер.Он полезен только на мобильных или на компьютере тоже?Он рассчитан на мобильные веб-страницы, где полноценные devtools недоступны; будучи обычным скриптом, загружаемым вместе со страницей, он работает везде, где работает эта страница.
Он рассчитан на мобильные веб-страницы, где полноценные devtools недоступны; будучи обычным скриптом, загружаемым вместе со страницей, он работает везде, где работает эта страница.Он работает в WeChat Miniprograms или только на обычных мобильных страницах?И там, и там: теперь это официальное средство отладки для WeChat Miniprograms, а в репозитории рядом с обычной веб-сборкой есть отдельная сборка wx.
И там, и там: теперь это официальное средство отладки для WeChat Miniprograms, а в репозитории рядом с обычной веб-сборкой есть отдельная сборка wx.Можно пользоваться бесплатно, в том числе в коммерческих проектах?Да — он выпущен под лицензией MIT, так что его можно бесплатно использовать и встраивать в любой проект, включая коммерческий.
Да — он выпущен под лицензией MIT, так что его можно бесплатно использовать и встраивать в любой проект, включая коммерческий.Что именно я могу с его помощью посмотреть?Логи консоли (log, info, error и другие), сетевые запросы из XMLHttpRequest, Fetch и sendBeacon, дерево HTML-элементов в реальном времени, сведения о системе и производительности, а также командную строку, чтобы вручную выполнять JS.
Логи консоли (log, info, error и другие), сетевые запросы из XMLHttpRequest, Fetch и sendBeacon, дерево HTML-элементов в реальном времени, сведения о системе и производительности, а также командную строку, чтобы вручную выполнять JS.Можно ли редактировать значения в хранилище прямо из панели?Да — в панели Storage можно добавлять, изменять, удалять или копировать записи Cookies, LocalStorage и SessionStorage.
Да — в панели Storage можно добавлять, изменять, удалять или копировать записи Cookies, LocalStorage и SessionStorage.Могу ли я добавить свои панели или функции?Да, поддерживаются собственные плагины, и в документации описано, как написать свой; сообщество поддерживает дополнительные плагины вроде vconsole-webpack-plugin, vite-plugin-vconsole и плагина для vue-devtools.
Да, поддерживаются собственные плагины, и в документации описано, как написать свой; сообщество поддерживает дополнительные плагины вроде vconsole-webpack-plugin, vite-plugin-vconsole и плагина для vue-devtools.Есть ли тёмная тема?Да — на обзорных скриншотах показаны и светлая, и тёмная темы.
Да — на обзорных скриншотах показаны и светлая, и тёмная темы.What are similar projects?eruda, better-scroll, react-grab, devtools-v6, qiankun, debug, react-scan, redux-devtools-extension
eruda, better-scroll, react-grab, devtools-v6, qiankun, debug, react-scan, redux-devtools-extension