Советы по развитию
vConsole
В процессе разработки приложения h5 обычно используется отладка браузера, но если вы действительно поместите код на стороне h5, иногда вы будете сталкиваться с некоторыми ситуациями, которые невозможно обработать. Например, если вы столкнулись с ситуацией раньше, используйте новую дату ('2020-11-17 12:12') (похоже, что Safari и IE не работают, используйте его с осторожностью), это преобразование формата, совместимость не рассматривается, отладка хрома в норме, но после того, как мобильный телефон открывает приложение , параметр времени возвращает значение null. Это более сложная ситуация.
Итак, я подумал, как просмотреть код, возврат интерфейса и сообщение об ошибке конца h5, как в браузере?
Я нашел относительно простой в использовании инструмент - VCosole. Его также очень просто вызвать. Поскольку он не является необходимым для проекта, добавьте следующий код непосредственно на html-страницу проекта, и вы сможете удалить его, когда будете не нужно:
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
<script>
var vConsole = new VConsole();
</script>
复制代码
После запуска проекта появится кнопка vConsole, щелкните, чтобы открыть интерфейс смоделированных инструментов разработчика, как показано на рисунке выше, и в это время также можно увидеть сообщение об ошибке ~
Чарльз
Я поддерживаю общедоступный компонент компании в течение определенного периода времени. Это простой файл js. Требуется много усилий для поддержки каждый раз. Его нельзя запустить, как проект Vue, чтобы проверить эффект.
Решение: используйте инструмент агента Charles, чтобы заменить онлайн-файл локальным js-файлом, чтобы просмотреть эффект.
Выполните следующие действия: 1. Откройте приложение Charles -> щелкните инструменты на панели инструментов -> щелкните Map Local -> щелкните добавить
Откройте всплывающее окно, Map From - это адрес онлайн-ссылки, вы можете заполнить каждый параметр по очереди, если вы сочтете это проблематичным, вы можете получить полный путь ссылки и указать путь напрямую, а также другие параметры будет автоматически завершен (это хорошо ~); Локальный путь - это путь к локальному файлу
2. После заполнения параметров на шаге 1 нажмите OK и обновите страницу, чтобы увидеть, что онлайн-файлы были заменены локальными файлами ~
отменяет
Это запись, которая поставляется с инструментами разработчика браузера Chrome, которые могут заменять онлайн-файлы локальными файлами.
Путь: option + commond + c Открыть консоль, Источники -> Переопределить -> Выбрать папку для переопределений -> выбрать соответствующий файл
Метод замены: получите путь к заменяемому файлу, начните с уровня доменного имени, по очереди создайте новую папку и поместите локальный файл, который мы хотим заменить, на самый внутренний уровень, например: www.baidu.com/js /a.js
Создайте новую папку 1, имя папки: www.baidu.com, папка 1, новая папка 2, имя: js В папке 2 поместите наш локальный файл, a.js
Откройте страницу в это время, вы увидите, что онлайн-файл был заменен локальным файлом ~
маяк
Функции
Lighthouse - это инструмент автоматизации с открытым исходным кодом, который улучшает качество веб-приложений на основе отчетов, созданных Lighthouse.
Как пользоваться
- Откройте devtool, нажмите аудит, а затем нажмите кнопку сгенерировать отчет, но вы часто можете столкнуться с застреванием в маяке на этапе разогрева.
- Используйте командную строку для глобальной установки lighthouse: npm install -g lighthouse, затем введите в терминале: lighthouse url (URL-адрес, который вы хотите проверить), например: lighthouse www.baidu.com . Команда: lighthouse --help для просмотра доступные варианты ввода и вывода
Наконец, Lighthouse генерирует html-файлы по умолчанию, и в отчете будет представлен соответствующий план ремонта.По результатам сгенерированного отчета можно проанализировать производительность страницы и исправить недостатки. Вот примеры:
Наконец, если вам нужны эти материалы, вы можете щелкнуть здесь, чтобы получить их
