Vous pouvez certainement utiliser les conseils de développement front-end que le patron de Tencent T4 a compilés du jour au lendemain!

Conseils de développement

vConsole

Dans le processus de développement d'applications h5, le débogage du navigateur est généralement utilisé, mais si vous mettez vraiment le code du côté h5, vous rencontrerez parfois des situations qui ne peuvent pas être gérées. Par exemple, si vous rencontrez une situation antérieure, utilisez une nouvelle date ('2020-11-17 12:12') (safari et IE semblent ne pas fonctionner, utilisez-le avec prudence), cette conversion de format, la compatibilité n'est pas prise en compte, le débogage chrom est tout normal, mais après que le téléphone mobile ouvre l'application , le paramètre time renvoie null. Cette situation est plus piquée

J'ai donc réfléchi à la façon d'afficher le code, le retour de l'interface et le message d'erreur de l'extrémité h5 comme un navigateur?

J'ai trouvé un outil relativement facile à utiliser - VCosole. Il est également très simple à appeler. Comme il n'est pas nécessaire pour le projet, ajoutez le code suivant directement à la page html du projet, et vous pourrez le supprimer lorsque vous n'en ai pas besoin:

    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>
      var vConsole = new VConsole();
    </script>
复制代码

Une fois le projet démarré, un bouton vConsole apparaîtra, cliquez pour ouvrir l'interface devtools simulée comme indiqué dans la figure ci-dessus, et le message d'erreur peut également être vu à ce moment ~

Charles

J'ai maintenu un composant public de l'entreprise pendant un certain temps. C'est un simple fichier js. Cela demande beaucoup d'efforts à maintenir à chaque fois. Il ne peut pas être démarré comme un projet Vue pour vérifier l'effet.

Solution: utilisez l'outil agent Charles pour remplacer le fichier en ligne par le fichier js local pour afficher l'effet

Utilisez les étapes: 1. Ouvrez l'application Charles -> cliquez sur les outils dans la barre d'outils -> cliquez sur Map Local -> cliquez sur ajouter

Ouvrez la fenêtre contextuelle, Map From est l'adresse du lien en ligne, vous pouvez remplir chaque paramètre à tour de rôle, si vous le trouvez gênant, vous pouvez obtenir le chemin complet du lien et remplir le chemin directement, ainsi que les autres paramètres sera automatiquement complété (c'est bien ~); Local Path est le chemin du fichier local

2. Après avoir renseigné les paramètres à l'étape 1, cliquez sur OK et actualisez la page pour voir que les fichiers en ligne ont été remplacés par des fichiers locaux ~

remplace

Il s'agit d'une entrée fournie avec les outils de développement du navigateur Chrome, qui peuvent remplacer les fichiers en ligne par des fichiers locaux

Chemin: option + commond + c Ouvrez la console, Sources -> Override -> Sélectionnez le dossier pour les remplacements -> sélectionnez le fichier correspondant

Méthode de remplacement: obtenez le chemin du fichier à remplacer, commencez au niveau du nom de domaine, créez un nouveau dossier à son tour, et placez le fichier local que nous voulons remplacer dans la couche la plus interne, par exemple: www.baidu.com/js /a.js

Créez un nouveau dossier 1, le nom du dossier est: www.baidu.com dossier 1, le nouveau dossier 2, le nom est: js Dans le dossier 2, mettez notre fichier local, a.js

Ouvrez la page à ce moment, vous pouvez voir que le fichier en ligne a été remplacé par le fichier local ~

phare

Fonctionnalités

Lighthouse est un outil d'automatisation open source qui améliore la qualité des applications Web basées sur les rapports générés par le phare.

Comment utiliser

• Ouvrez devtool, cliquez sur audit, puis sur générer un rapport, mais vous pouvez souvent rencontrer une étape de préchauffage coincée dans le phare

• Utilisez la ligne de commande pour installer lighthouse globalement: npm install -g lighthouse, puis entrez dans le terminal: lighthouse url (l'URL que vous souhaitez tester), par exemple: lighthouse www.baidu.com . Commande: lighthouse --help pour afficher le options d'entrée et de sortie disponibles

Lighthouse génère enfin des fichiers html par défaut, et le rapport donnera le plan de réparation correspondant.Selon les résultats du rapport généré, les performances de la page peuvent être analysées et les lacunes peuvent être modifiées. Les exemples sont les suivants:

Enfin, si vous avez besoin de ces matériaux, vous pouvez cliquer ici pour les obtenir