Pour accéder au site web côté PC, nous pouvons appuyer sur F12 pour ouvrir l’outil de débogage via le navigateur afin de consulter les journaux de sortie, les requêtes réseau, les éléments de page web, les cookies et d’autres informations.
Cependant, lorsque nous développons des programmes mobiles ou des mini-applications et applications, il y a un problème anormal, et nous ne pouvons pas consulter directement ces informations anormales. Cet article recommande deux panneaux de débogage pour développeurs front-end.
Commencez par télécharger le code source :
vConsole
Un panneau de débogage léger, évolutif, pour développeurs front-end, destiné aux pages web mobiles.
- Vérifiez les journaux de la console
- Voir les requêtes réseau
- Regardez la structure des éléments de page
- Consultez Cookies, localStorage et SessionStorage
- Exécuter manuellement la ligne de commande JS
- Plugins personnalisés
Adresse:La connexion hyperlientérée est visible.
Eruda
Eruda est un panneau de débogage conçu pour la interface des pages web mobiles, similaire à une version mini de DevTools, avec des fonctions clés telles que : capturer les journaux console, vérifier l’état des éléments, capturer les requêtes XHR, afficher le stockage local et les informations sur les cookies, et plus encore.
Glisser-déposer de boutons, réglage de la taille de la transparence du panneau.
- Panneau console : capture les journaux de la console, prise en charge des journaux, erreurs, infos, avertissement, dir, temps/tempsTerminaison, effacier, compter, asserter, table ; prise en charge des espaces réservés, y compris la sortie personnalisée %c ; Prendre en charge le filtrage par type de logarithum et expression régulière ; L’exécution de scripts JavaScript est prise en charge.
- Panneau Éléments : Voir le contenu et les propriétés des tags ; Voyez comment votre application se style sur le DOM ; Prise en charge de la surbrillance des éléments de page ; Supporter la sélection directe par clic à l’écran ; Consultez les types d’événements liés sur le DOM.
- Panneau réseau : Capturez les requêtes et consultez les informations telles que les données envoyées, les en-têtes de retour et le contenu retourné.
- Panneau Ressources : Afficher et effacer localStorage, sessionStorage et cookies. Voir les scripts de chargement de la page et les fichiers de style ; Voir les images de chargement de la page.
- Panneau sources : Voir le code source de la page ; Formatez les données HTML, CSS, JS et JSON.
- Panneau d’information : URL de sortie et Agent utilisateur ; Prenez en charge le contenu de sortie personnalisé.
- Panneau de fragments : ajouter des bordures aux éléments de page ; Ajoutez un horodatage pour rafraîchir la page ; Les extraits de code personnalisés sont pris en charge.
Adresse:La connexion hyperlientérée est visible. |
Publié sur 29/06/2020 15:36:20
|
|
|
|
Propriétaire|
Publié sur 08/02/2025 13:44:17
|
