outils de développement Chrome panneau les plus utiles Sources. panneau Sources est presque les fonctions les plus utilisées du panneau Chrome, mais aussi de résoudre le problème général des principales fonctions du panneau. Tant que le développement est généralement rencontré erreur js ou d'autres problèmes de code, js étaient ouvertes Sources des points d'arrêt Après avoir examiné à nouveau le code et rien, près de 80% du code peut résoudre le problème.
les gens de la fonction de rupture js excité, auparavant disponible uniquement sur popups alerte le débogage du code js dans IE, comme l'environnement de développement front-end pour les programmeurs est un cauchemar. Cette introduction des sources spécifiques d'utilisation, vous aide code js heureusement assez débogage au cours du développement, plutôt que à cause de cela fou.
Tout d'abord, ouvrez les outils de développement F12 pour passer au panneau Sources
panneau Sources est fonction du panneau des ressources, il a divisé en quatre parties, quatre parties ne sont pas indépendants, ils sont liés les uns aux autres, pour accomplir une Interagir fonction importante: les activités de surveillance js dans la phase de mise en uvre. En termes simples, il est le point d'arrêt.
D'abord, nous regardons la région 1, qui fonctionne à peu près semblable au panneau des ressources, afficher principalement une page Web pour fichier script de charge: par exemple, css, js et d'autres fichiers de ressources (il ne contient pas cookie img et d'autres fichiers de ressources statiques).
Il y a des zones sur la barre de navigation 1 trois options de commutation de l'onglet, ils sont là js et les fichiers CSS dans différents domaines et environnements, nous avons d'abord expliquer le rôle des sources (ressources) Options:
Sources: contient des fichiers de ressources statiques pour le projet. Double-cliquez sur le fichier sélectionné, le contenu du fichier sera affiché dans la zone 2, si vous sélectionnez un fichier js, alors vous pouvez point d'arrêt de débogage dans la région de deux types en cliquant sur le numéro de ligne, tant que js pour exécuter cette ligne vous l'avez marqué il arrête l'exécution vers le bas et attendre votre commande:
De la figure peut être vu lorsque les changements dans les régions respectives pour effectuer js points d'arrêt, les points d'arrêt des informations de première zone d'enregistrement 3 est mis en surbrillance, et la zone est de 4 options d'étendue répertoriées des variables privées et publiques breakpoint informations, donc je peux savoir intuitivement, à ce moment l'état d'exécution de js. De même, vous pouvez mettre la souris sur une variable à deux types de zones, le navigateur affiche une petite boîte, à l'intérieur de la boîte, vous êtes suspendus sur l'ensemble de ses informations variables:
Ensuite, vous pouvez appuyer sur F10 pour suivre le chemin js exécuté pas à pas le long de cette route, si vous rencontrez une fonction contient une autre fonction, vous pouvez entrer une fonction, appuyez sur F11 pour observer ses activités d'application de code. Vous pouvez également garder une trace de chaque code js en cliquant sur l'icône en bas de la zone 1. Mais je vous suggère d'utiliser le nom du raccourci suggère, car il est rapide et facile. Mais comment se fait avec selon les habitudes individuelles. La figure est le rôle fonctionnel de chaque bouton.
Dans le cercle bleu sur la carte numérique, qui représentent:
1, un point d'arrêt de débogage d'arrêt
2, ne va pas en fonctions, à la ligne de code suivante (F10)
3, allez dans les fonctions (F11)
4, sur la fonction réalisée par le
5, désactiver tous les points d'arrêt, sans aucun débogage
6, que ce soit pour interrompre l'exécution du programme rencontre une exception lorsque le commutateur
Passez ensuite à la zone en quatre types d'options expressions espionnes, et son rôle est d'ajouter les expressions actuelles des points d'arrêt, ce qui rend chaque point de pause pour descendre étape exécuter du code js que vous avez écrit. Notez que cette fonction doit être utilisée avec prudence, car il peut vous faire écrire sur le segment de code du moniteur continuera à exécuter.
Afin d'éviter de répéter votre exécution de code de débogage, nous pouvons une fois le courant de sortie de point d'arrêt (recommandé) lors du débogage directement sur la console de la console. Afin de vérifier que nous avons dans le panneau de la console est l'environnement actuel point d'arrêt, je casse la porte peut comparer cette valeur change avant et après l'exécution.
Si vous pensez qu'un point d'arrêt lorsqu'une variable doit emprunter pour voir la sortie de la console de façon de voir le panneau serait plus de problèmes, vous pouvez mettre à jour la dernière version de Chrome, il a résolu ce problème pour nous. Afin de faciliter les développeurs de déboguer, dans cette vallée de la chanson a atteint le nec plus ultra, puis quelques jours après l'avant Chrome mis à jour Luzhu surpris de trouver un autre moyen de surveiller les variables d'environnement lorsque des points d'arrêt, cette approche est très claire, en points d'arrêt lors du débogage, zone 2 affiche automatiquement la valeur de chaque variable, chaque fois que le code redescendent lorsque les valeurs sont mises à jour de temps à autre. Cela permet aux développeurs d'être presque dire des variables d'environnement actuelles un coup d'oeil. (Cette fonction est un petit défaut, il ne peut pas voir les valeurs d'index spécifique et un tableau ou un objet, mais je crois que Google pourrait l'améliorer.)
Lorsque votre projet est déjà en ligne, il y a un bug, vous ne pouvez pas voir l'effet sur la restauration de sa vraie ligne, vous pouvez modifier le code dans le navigateur pour ouvrir le projet en ligne directe et de voir l'effet. Cet effet est souvent le plus simple, cette approche peut également vous aider à éviter des complications fréquentes libérés en train de vérifier, après tout, après la cour avant que les agriculteurs vous allez certainement entendre la station (généralement une édition d'arrière-plan) se plaignent Big Brother : « XXX, le test n'a pas été adopté, ne semble pas le Kazakhstan, publié beaucoup d'ennuis !. » Dans l'intérieur Chrome, seulement besoin de deux types de modifier directement la zone, vous pouvez vérifier la faisabilité de votre code en ligne. Lu Zhu a souligné ici est juste une utilisation de cette fonctionnalité. Autre ingéniosité de vous seul, à penser.
Même si un point d'arrêt, vous pouvez également modifier le code, puis appuyez sur Ctrl + S pour enregistrer, vous verrez la zone de fond 2 du blanc à la lumière de couleur, et le point d'arrêt sera lancé re.
Retour à la zone 1, les options de script de contenu ouvert qui contient un certain nombre de plug-ins tiers ou le code du navigateur lui-même, ce qui est souvent négligé, en fait, très peu de son rôle. Snippets nous pouvons regarder plus d'options. Rappelez-vous les bases qui ont introduit le style dans lequel nous pouvons faire l'interface d'édition de code CSS et voir instantanément l'effet de leurs cartes. De même, dans Sinppets, nous pouvons modifier (rewrite) l'extrait de code. Ces fragments sont en fait équivalent à vos fichiers js, sauf que l'éditeur de fichier js local pour modifier l'intérieur, et voici que vous écrivez dans votre navigateur. Ces extraits ne disparaîtront lorsque le rafraîchissement du navigateur n'est pas exécuté, à moins que vous exécutez manuellement. Il peut exister dans votre navigateur local, même lorsque vous fermez votre navigateur et ouvrez à nouveau les restes sont toujours là. Pour autant son rôle principal peut nous permettre d'écrire des projets de code de test en pratique, vous savez, si vous écrivez le code dans l'éditeur, lorsque vous vous publier devez ajouter symbole de commentaire ou les supprimer manuellement car ils sont, et le navigateur de sorte que vous n'avez pas besoin de lourdeur d'écriture.
Après avoir sélectionné les bons Snippets de blanc de nouvelles options pop-up option pour créer un nouveau fichier sur votre propre, il est deux types de zone d'édition.
Snippets est très puissant, il est beaucoup de fonctionnalités cachées encore à découvrir. Actuellement, il est utilisé des fragments de Luzhu se rappeler le débogage, les tests unitaires, le code écrit sur un petit nombre de capacités fonctionnelles.
Enfin, nous examinons les riches capacités de surveillance en temps js, comme décrit ci-dessus, le panneau des articles Sources et le panneau éléments ont les mêmes événements et fonctions de surveillance fonction des sources les plus riches et plus puissants. Elle est concentrée dans cette partie de la région 3 fonctions. Je le schéma suivant, par exemple, d'observer son effet.
De haut en bas, la signification du cercle violet numérique:
1, pile de la dette point d'arrêt, qui est, à partir de la fonction, étape par étape poursuivre son appel au nom de la fonction. Par exemple:
une fonction () {
B ();
}
fonction b () {
C ();
}
fonction c () {
// où les points d'arrêt, voir la pile d'appel
}
a- > b- > c.
pile d'appel de haut en bas est de l'ordre
c
b
un
2, votre point d'arrêt des informations de débogage dans la zone 2. Lorsque des informations de mise en surbrillance est exécutée quand un point d'arrêt correspondant, double-cliquez sur où l'information peut être rapidement positionné dans la région 2.
3, ajouté des informations de surveillance Dom.
4, la chaîne de caractères d'entrée et URL + a frappé contenu requête Ajax pour surveiller l'URL, le contenu est équivalent à l'entrée du filtre une URL. Si rien est rempli, puis écoutez toutes les demandes de XHR. Est interrompu dans des endroits request.send () est déclenchée une fois que les appels XHR.
5, ajouter différents types d'informations comme une page breakpoint Web. La souris est sélectionné comme un élément (clic), lorsque vous démarrez cette action (cliquez n'importe où sur la page) sur la page, le navigateur est de briser immédiatement vous surveillez cet événement.
Vaut répéter encore une fois, des sources est un développement fonctionnel des caractéristiques générales des plus couramment utilisés et les plus utiles du panneau, la plupart des fonctionnalités pour nous de développer l'ingénierie d'avant est très utile. À l'ère web2.0 d'aujourd'hui, je ne recommande pas encore d'écrire des informations de débogage dans mon propre comportement de code, car il sera alors développer votre lourdeur. Chrome puissants outils de développement pour nous offrir, nous devrions profiter de
