En tant老婆de chaussures pour enfants de première ligne, je pense que vous devez être familiarisée avec le navigateur Chrome.调页面,写BUG ,画样式et看php片, le monde entier serait inutile sans cela.
Vous n'y croyez pas ? Voyons à quel point nos老婆sont puissantes...
Lors du débogage conjoint de l'interface back-end ou du dépannage de bugs en ligne, les entendez-vous souvent prononcer cette phrase : Vous essayez de faire une autre requête et laissez-moi voir pourquoi l'erreur s'est produite !
Il existe un moyen ridiculement simple de renvoyer la demande.
Sélectionnez Network
cliquez sur Fetch/XHR
sélectionnez la demande à renvoyer,
cliquez avec le bouton droit et sélectionnez Replay XHR
Il n'est pas nécessaire d'actualiser la page ou d'interagir avec la page, n'est-ce pas très cool ? ! !
le cas d'un lancement rapide d'une requête dans la console ou d'un débogage conjoint ou d'une correction de bug, pour la même requête, il est parfois nécessaire de modifier les paramètres d'entrée et de relancer.
Sélectionnez Network
cliquez sur Fetch/XHR
sélectionnez Copy as fetch
console de récupération, collez le code
pour modifier les paramètres et appuyez sur Entrée pour terminer.
Dans le passé, je résolvais toujours cela en changeant le code ou en écrivant fetch à la main. C'était vraiment stupide d'y penser...
Si votre code est calculé, il produira un objet complexe , et il doit être copié et envoyé à d’autres personnes, que dois-je faire ?
Utilisez la fonction copy pour exécuter对象en tant que paramètre d'entrée
Dans le passé, je l'ai toujours imprimé sur la console via JSON.stringify(fetfishObj, null, 2) , puis je l'ai copié et collé manuellement, c'était vraiment inefficace...
lors du débogage de la page Web. Après avoir sélectionné un élément dans le panneau Elements , que se passe-t-il si vous souhaitez connaître certains de ses attributs, tels que宽,高,位置, etc., via JS ?
Sélectionnez l'élément à déboguer via Elements
et accédez directement à la console avec $0
Nous devrons parfois prendre une capture d'écran d'une page Web. Les captures d'écran intégrées au système ou les captures d'écran WeChat peuvent être effectuées, mais cela est nécessaire pour capturer le contenu qui dépasse. un écran. Que faire ?
Préparez le contenu qui doit être pris.
cmd + shift + p Exécutez la commande Command
et entrez Capture full size screenshot et appuyez sur Entrée.
Et si vous souhaitez intercepter certains éléments sélectionnés ?
La réponse est également très simple. Dans la troisième étape, entrez Capture node screenshot
du débogage des éléments, les développez-vous souvent un par un pour les déboguer lorsque le niveau est relativement profond ? Il existe un moyen plus rapide
de maintenir la touche opt + clic (l'élément le plus externe qui doit être développé)
pour voir ce scénario. Je suppose que vous devez l'avoir rencontré. Divers processus ont été effectués sur une certaine chaîne, et nous voulons ensuite connaître les résultats de chaque étape d'exécution. Que devons-nous faire ? .
'fatfish'.split('').reverse().join('') // hsiftaf vous pourriez faire ceci
// Étape 1 'fatfish'.split('') // ['f', 'a ', 't', 'f', 'i', 's', 'h']
// Étape 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i ', 'f', 't', 'a', 'f']
// Étape 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf 
Un moyen plus simple consiste
à utiliser $_ pour référencer le résultat de l'opération précédente sans le copier à chaque fois
// Étape 1 'fatfish'.split('') // ['f', 'a', 't', ' poisson']
// Étape 2 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// Étape 3 $_.join('') // hsiftaf
Certains étudiants aiment le thème blanc de Chrome et d'autres aiment le noir. Nous pouvons utiliser des touches de raccourci pour basculer rapidement entre les deux thèmes.
cmd + shift + p exécutez la commande Command
et entrez Switch to dark theme ou Switch to light theme pour changer de thème.
$ " et " $$ "sont l'exigence la plus courante pour utiliser document.querySelector et document.querySelectorAll sur la console pour sélectionner des éléments de la page actuelle, mais c'est en fait un peu trop long. Nous pouvons utiliser $ et $$ substitut.
$i Installez le package npm directement dans la console.Avez-vous déjà rencontré ce scénario ? Parfois, je souhaite utiliser une API telle que dayjs ou lodash , mais je ne veux pas aller sur le site officiel pour la vérifier. Ce serait bien si je pouvais l'essayer directement sur la console.
Console Importer est un tel plug-in, utilisé pour installer les packages npm directement dans la console.
Installez Console Importer
$i('name') pour installer le package npm
Supposons qu'il y ait le code suivant Nous espérons que le point d'arrêt sera déclenché lorsque le nom de l'aliment est ? comment pouvons-nous faire ?
const aliments = [
{
nom: '?',
prix : 10
},
{
nom: '?',
Prix : 15
},
{
nom: '?',
Prix : 20
},
]
aliments.forEach((v) => {
console.log(v.nom, v.prix)
}) Ceci est très pratique lorsque vous utilisez une grande quantité de données et ne souhaite rompre la condition que lorsque la condition est remplie. Imaginez s'il n'y a pas de points d'arrêt conditionnels, devons-nous cliquer n fois sur le débogueur ?
(Partage de vidéos d'apprentissage : développement Web front-end, vidéo sur les bases de la programmation)
Ce qui précède présente les détails de 11 compétences de débogage Chrome qui peuvent améliorer l'efficacité. Pour en savoir plus, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !