Outil d'élément d'inspection essentiel pour les développeurs Web | WordPress

1. Introduction : Utiliser l'élément Inspect en particulier pour les développeurs Web: Salutations tout le monde. Je suis Susan pour eux. Et aujourd'hui, nous allons apprendre quelques conseils et astuces utiles en utilisant l'élément Google Chrome Inspect. Ces bandes, je vais être utile à tout le monde, mais surtout ceux qui travaillent sur le développement de site Web. Voici donc ce qui est inclus. Nous allons rapidement en apprendre davantage sur le sélecteur de couleurs intégré avec élément inspecter, pas besoin d'extensions Chrome. Aussi pour beaucoup, ce bécher ne fonctionne pas, donc nous allons apprendre à les réparer. Alors les développeurs web, avez-vous eu du mal à trouver l'ID avec des éléments de tiding ? Nous allons apprendre un truc rapide sur la façon dont vous pouvez utiliser l'élément inspecter sur eux. Nous allons alors trouver maintenant passeport trompé en utilisant l'élément inspecter. Et enfin, nous allons comprendre comment nous pouvons changer le texte et les images d'un site web en direct. Comprenez également comment les données peuvent être manipulées à l'aide de ces outils. Ainsi, le seul objectif de ce cours est de vous donner quelques informations essentielles sur Inspect Element et comment vous pouvez les utiliser. Qu' apprendrez-vous dans ce cours ? Ce cours vous donnera des informations utiles sur Google inspecter élément et comment vous pouvez les utiliser tout en développant votre site Web vous donne également un côté Cassius que pas tout ce que vous voyez sur l'internet vireo. Alors soyez prudent. Quelles compétences ou connaissances de codage sont requises pour cette leçon. Tout dans ce cours est clairement expliqué. Tout ce que vous devez savoir est comment utiliser Google Chrome. En outre, si vous êtes un développeur web, avoir une idée d'utiliser CSS vous donnera un avantage supplémentaire. Conclusion, après ce cours, vous devriez avoir une idée sur l'utilisation de l'élément inspecter et comment il peut contribuer à votre processus de conception orale et de développement web. Alors commençons. 2. Conseils et astuces d'élément utiles pour les développeurs Web: Salutations tout le monde. Dans le tutoriel d'aujourd'hui, nous allons rapidement apprendre quelques-uns des conseils et astuces utiles pour utiliser l'élément inspecter. Cela peut être très utile à tout le monde. Et si vous êtes dans la conception de site Web, alors cela peut être très pratique. Alors commençons. Pour commencer. Ouvrons notre navigateur. Donc, si vous concevez quelque chose ou que vous voulez trouver la couleur que vous voyez sur l'écran, alors vous pouvez le faire avec l'élément inspecter. Bien sûr, vous pouvez utiliser une extension Chrome pour cela. Mais pourquoi s'embêter quand nous avons un sélecteur de couleurs intégré ? Permettez-moi de rechercher rapidement quelques jeux de couleurs. Voici donc les options. Laisse-moi prendre ça. Supposons que je veuille trouver les couleurs qu'il utilise, afin de pouvoir l'adapter à mon InDesign. Pour ce faire, cliquez avec le bouton droit de la souris et accédez à Inspecter l'élément sur ces styles. Si vous voyez des couleurs, c'est bon. Sinon, ajoutez simplement de la couleur et du blanc ou n'importe quelle couleur, n'a vraiment pas d'importance. Maintenant, cela va apporter ce sélecteur de couleur, cliquez dessus, et maintenant vous pouvez trouver la couleur. Cliquez ici et plus pour la couleur que vous souhaitez utiliser. Parfois, cela ne fonctionne pas, comme vous pouvez le voir, pour faire ce travail, vous devrez prendre cette section sombre soit à gauche, soit à droite. Pour ce faire, cliquez ici, je vais le prendre sur le côté gauche et à nouveau, cliquez sur ce sélecteur de couleurs. Cliquez ici. Et vous pouvez voir que ça marche. Choisissez la couleur que vous voulez. Vous trouverez les détails Higgs et RGBA, puis utilisez-les en conséquence. Ensuite, vous pouvez simplement déplacer l'obscurité en bas. Cela fonctionne sur la plupart des sites Web. Laissez-moi vérifier rapidement un autre côté. Donc, comme vous pouvez le voir, ça marche tout bien. Maintenant, si vous êtes un développeur web et que vous devez utiliser l' élément inspect pour faire les changements CSS et bien plus encore. Mais parfois, il est difficile d'utiliser CSS pour cacher des éléments. Par exemple, de ce côté, si je clique sur la musique et si je veux apporter des modifications à ce menu, et dès que je clique sur Inspecter l'élément, cela disparaît. Mais pas de soucis, nous pouvons le mettre en pause et utiliser l'outil Inspecter l'élément pour cela. Allez à George, puis cliquez sur le menu masqué et gardez votre souris là et appuyez sur F8. Maintenant, ce qui se passe est qu'il provoque l'écran comme vous pouvez le voir, et vous pouvez facilement utiliser cet élément d'inspection. Voici donc l'ID du menu et je peux faire les changements nécessaires. Et une fois que vous avez terminé, ferme simplement et tout sera tout normal. Maintenant, une autre simple utilisation d'Inspect Element pourrait être de trouver ce mot de passe enregistré. Supposons que vous vous êtes connecté à quelques pas et que vous avez oublié le mot de passe. Ensuite, en utilisant l'élément inspecter, vous pouvez trouver le mot de passe que vous avez utilisé. Par exemple, j'ai un mot de passe enregistré sur ce navigateur Brave, mais il fonctionne exactement la même chose sur Chrome aussi. Maintenant, supposons que si je vais sur ce site, vous pouvez voir qu'il y a un mot de passe sécurisé. Tous les sites Web n'auront pas cette option. Dans ce cas, vous pouvez simplement cliquer avec le bouton droit de la souris, Inspecter, cliquer ici, et Hoover faire ce mot de passe. Maintenant, dans le type d'entrée, double-cliquez sur le mot de passe et modifiez-le en texte et Entrée. Ainsi, vous pouvez voir le mot de passe est révélé. Cette astuce va convertir tous les points noirs au texte. Par exemple, si je vais à Facebook et si elle est enregistrée comme ça. Et vous voulez trouver le mot de passe utilisé, il suffit de cliquer avec le bouton droit sur Inspecter, exagérer le mot de passe, puis changer le type d'entrée en texte. Et ça marchera. Tout génial. Maintenant, la dernière partie de ce tutoriel, il peut être très pratique, surtout si vous êtes un développeur web ou si vous cherchez à développer un site Web. Cela peut également être utilisé pour apporter quelques modifications à un site Web en direct et voir à quoi il ressemblera. De nombreux développeurs utilisent des thèmes pour leur site Web et avant de l'acheter, vous aimeriez voir à quoi ressemblerait la démo avec votre propre logo, images et texte. Cela peut être très utile pour le montrer à votre client aussi. Allons à thème forêt ordonnée à titre d'exemple et cherchons un thème. Pour l'instant, je vais essayer avec enfold. Voici un thème. Cliquez dessus. Et vérifions l'aperçu en direct. Supposons maintenant que vous voulez créer un site Web en utilisant l'une de ses démos, ou que vous voulez que votre client voit le site Web ? Laissez-moi choisir un site de démonstration. Ok, celui-là. Le site a l'air bien, mais je veux voir à quoi il ressemblera avec mes propres images, logo et texte. Pour cela, cliquez simplement avec le bouton droit de la souris et allez dans Inspecter. Allez à la console. Copiez ce code. Cela sera fourni et collé en bas et Entrée. Maintenant, vous pouvez effectuer des modifications de ticks sur ce site Web. Fermez ceci. Maintenant, je vais apporter quelques modifications au texte. Alors faites toutes les modifications aux textes du site. Cependant, s'il vous plaît, parce que oui, tout en apportant des modifications au menu, car il pourrait ouvrir le lien et tout sera actualisé. Donc je vais le laisser tel quel. Après les échanges. Vous pouvez enlever la partie supérieure. À juste titre, Inspecter l'élément. Cliquez ici, mettez en évidence ceci, tous. Cliquez ici, cliquez avec le bouton droit et supprimez l'élément. Maintenant, il est parti. Maintenant, remplacons-le par notre propre logo. Je voudrais utiliser ce logo. Si vous avez vos images en ligne, vous pouvez simplement utiliser l'adresse e-mail. Par exemple, je vais cliquer avec le bouton droit et copier l'adresse de l'image. Cliquez ici, et sur le logo. Voici le lien exact. Remplacez-le par votre propre lien et entrez. De même pour changer la bannière, faites de même, vous devez savoir comment remplacer les images et autres. Pour utiliser cet outil efficacement, vous devrez peut-être rechercher de haut en bas une recherche pour JPEG, PNG ou API Web en appuyant sur Contrôle plus F. Quoi qu'il en soit, j'aime utiliser cet e-mail comme une bannière. Peut poster cela en ligne n'importe où et obtenir un lien. Je vais aller à snip board dot io, fichier de sélection. Une fois téléchargé, cliquez sur le lien et faites un clic droit sur l'e-mail et obtenez son URL. Copiez l'adresse de l'image, et maintenant remplacez-la sur le site Web. Puisqu' il y a trois bannières, je vais utiliser la même chose pour tous. Vous pouvez ensuite prendre la capture d'écran et la montrer à vos clients. Ou peut aussi bien le sauver. Appuyez simplement sur Control S sur le clavier donné un nom et enregistrez. Cette option d'enregistrement, cependant, peut ne pas être aussi efficace. Il est donc conseillé de prendre une capture d'écran. Donc, de toute façon, cela fonctionne à partir du lecteur C, comme vous pouvez le voir. Laisse-moi fermer tous les navigateurs. Et voici le fichier enregistré en tant que fichier ML. Et tout fonctionne bien avec notre propre logo, des images et du texte. Vous pouvez utiliser le même code sur n'importe lequel de votre site Web et apporter les modifications nécessaires avant de travailler sur le back-end. Donc, j'espère vraiment que tous ces trucs et astuces sont utiles. Merci beaucoup. 3. Copiez le texte à partir d'images à l'aide d'un extension Google Chrome: Salutations à tout le monde. Dans le tutoriel d'aujourd'hui, nous découvrirons rapidement une extension Chrome capable de copier du texte à partir d'un e-mail, quelque chose comme celui-ci. Commençons à utiliser l'extension Chrome. Nous pouvons copier du texte à partir d' images provenant de sites Web. Cependant, veuillez noter qu'il peut ne pas fonctionner tous les côtés et peut ne pas être correct à 100%. Quoi qu'il en soit, ouvrons notre site. Apprenons quelque thing.com. Vous pouvez voir qu'il s'agit d'un e-mail, il s'agit également d'un e-mail et nous ne pouvons pas copier de texte à partir d'eux. Donc, pour copier du texte, google project nafta. C'est ça. Cliquez dessus. Pour Chrome, ajoutez une extension. L'extension a été ajoutée. Vous pouvez l'épingler si vous voulez le voir ici. Maintenant, permettez-moi de rouvrir Chrome et d' aller sur le site ici, apprenons quelque thing.com. Vous pouvez voir s'il est coloré, ce qui signifie que les données peuvent être copiées sur le site. Vous pouvez voir que je peux copier ce texte. Laissez-moi le coller dans le bloc-notes. Comme mentionné précédemment, la copie du texte peut ne pas être aussi parfaite. Cependant, vous pouvez le corriger manuellement ou utiliser des extensions grammaticales pour effectuer les modifications nécessaires. J'espère que cette vidéo est utile. Merci beaucoup. 4. Comment modifier le texte de n'importe quel site Web en utilisant l'élément inspection, enre: Salutations tout le monde. Dans le tutoriel d'aujourd'hui, nous allons rapidement éclairer comment les gens peuvent utiliser Inspect Element de façon permanente, l'enregistrer à cette formation de déguisement BC AD particulière. Donc quelque chose comme ça, cela restera Parramatta à ce navigateur particulier à moins que la réception ou l'ouverture du mode Incognito. Alors commençons. Donc, pour commencer, ouvrons un navigateur et installons l'extension Chrome. Il vous suffit de rechercher un élément d'inspection permanent. C'est le bon. Cliquez dessus pour Chrome. Ajouter une extension. Donc, l'extension a été ajoutée. Cliquez ici et être l'extension. Il est donc visible ici. Voyez si vous n'avez pas vraiment besoin, l'extension ne sera pas visible de toute façon. Maintenant, allons à notre exemple de direction de site Web Cutler do.com. Donc, c'est le site web. En passant, vous pouvez essayer avec n'importe quel site Web que vous voulez. Nous allons faire quelques modifications au texte de ce site pour cela, juste titre obtenu le site, cliquez sur Inspect Element ou à la console. Copiez ce code qui sera fourni à base de chaleur ajouté. Si vous connaissez CSS que vous pouvez utiliser cela pour de grands changements au texte de couleur. Il visite un soustrait de toute façon, qui ferment la console. Maintenant, avec le code précédent, ne peut pas apporter de modifications au texte que vous voulez. Après avoir apporté toutes les modifications ou obtenir le bouton droit de la souris Inspecter l'élément, accédez à COX-1. Copiez à nouveau ce code et collé. Maintenant, changez le vrai en faux. Modifiez et fermez cette console. Maintenant, vous ne serez pas en mesure de modifier le texte de ce site Web. Après cela, il suffit de cliquer sur cette extension. Cliquez sur Enregistrer les paiements. Veuillez cliquer quelques fois pour vous assurer qu'il est enregistré. Donc la base devrait l'avoir. Voyons si cela fonctionne ou non. Actualisez l'espace. Vous pouvez voir tous les changements dans le texte sont toujours ici. Laissez-moi essayer de l'ouvrir dans une autre fenêtre. Vous pouvez toujours voir toutes les modifications qui ont été apportées. Essayons rapidement facebook.com. Donc, comme vous pouvez le voir, il fonctionne sur Facebook D2. Même si j'ouvre un nouveau navigateur, ça marche. Laissez-moi fermer le navigateur Chrome et l'ouvrir à nouveau. Facebook.com et l'érosion tasse et le plus sombre. Ainsi, vous pouvez voir tous les changements sont toujours là. Cependant, s'il vous plaît noter, si vous effacez le navigateur ou ouvrez le mode Incognito, tout sera de retour à l'original. Cela signifie essentiellement qu'il est uniquement enregistré sur le navigateur et votre PC et ne reflétera pas sur d'autres ordinateurs. Et si vous voulez le réinitialiser, il suffit de cliquer sur l'extension et de cliquer sur réinitialiser tout et actualiser. Donc tout sur l'espace a été retourné. Vous devrez faire la même chose pour d'autres affaires aussi. Et une note très importante, nous avons vu beaucoup de gens utiliser cette astuce pour coudre la figue, les mots YouTube et d'autres revenus affiliés. Alors s'il vous plaît être conscient avant de faire n'importe quel égyptien, car il est très facile de se faire piéger. Bref, nous espérons que vous avez appris quelque chose de nouveau. Merci beaucoup. 5. Comment réinitialiser l'inspecteur chrome et modifier la position d'acat.: Salutations à tout le monde. Dans cette vidéo, nous allons rapidement apprendre comment réinitialiser ou restaurer les outils de développement Chrome aux valeurs par défaut. Et comme nous allons déplacer la position sombre. Donc, fondamentalement, vous pouvez déplacer votre obscurité vers la droite, le bas, la gauche, et même le défaire sont séparés. Commençons donc. Maintenant, pour une raison quelconque, si la configuration de votre outil Dave a changé, vous pouvez simplement la restaurer par défaut. Pour ça. Laissez-moi ouvrir Chrome, cliquez avec le bouton droit de la souris et accédez à Inspecter, surlignez n'importe où sur l'outil et appuyez sur F1 de votre clavier. Maintenant, faites défiler vers le bas et vous verrez les paramètres par défaut du restaurant et recharger, cliquez dessus. Et vos DevTools sont maintenant restaurés aux valeurs par défaut. Vous pouvez également modifier la position des outils de développement Chrome. Cliquez sur ces trois points et choisissez l'endroit où vous souhaitez garder l'obscurité. Actuellement, il est dans la bonne position. Cela donne l'obscurité en bas. Cela permettra de garder l'obscurité à gauche ou de cliquer ici pour séparer l'obscurité. Quoi qu'il en soit, j'aimerais le garder au bas de cette lésion était utile. Merci beaucoup. 6. Exemple d'utilisation d'un élément d'inspection sur YouTube: Salutations tout le monde. Donc, avant de commencer quoi que ce soit, laissez-moi rapidement aller sur notre chaîne YouTube. Hé, apprenons quelque chose. Donc, ici, vous pouvez voir les revenus, les gains pour le mois de mai au cas où vous avez des doutes. Permettez-moi de le reformuler rapidement. Alors voilà. Tout ce que tu as vu ici était un mensonge. Donc, fondamentalement, le seul objectif de ce tutoriel est d' où tout le monde et vous faire comprendre que pas tout ce que vous voyez en ligne Israël, mais bien sûr, il ya beaucoup de gens authentiques qui sont très vrais. Quoi qu'il en soit, je vais montrer comment cela est fait en utilisant l'élément inspecter. Commençons. Comme vous devez le savoir, Google Chrome offre beaucoup d'outils div, et l'un d'eux est inspecter élément. Je peux cliquer avec le bouton droit et inspecter l'élément. Et cela fonctionne sur la plupart des sites. Si je vais à la console et copiez ce code et collé en bas et entrez et fermez cet élément. Maintenant, tout ce qui se trouve sur ce site est modifiable. Vous pouvez faire tous les changements nécessaires et ensuite vous pouvez simplement le montrer comme une capture d'écran ou comme une vidéo. Maintenant, pour montrer qu'il est authentique, surtout dans la vidéo, je le revois à nouveau et je fais rapidement tous les changements comme celui-ci. Et plus tard édité sur l'éditeur vidéo. S' il vous plaît noter, j'avais déjà changé les gains pour ce canal de toute façon. Donc maintenant, ça a l'air très réel, n'est-ce pas ? Cette astuce Inspect Element fonctionne sur la plupart des sites Web. Ouvrons notre site web. Apprenons something.com. Cliquez avec le bouton droit de la souris et allez à l'élément inspecter, allez à la console et copiez ce code et collez le code. Maintenant, vous pouvez apporter des modifications au texte du site Web. C' est ainsi que les gens en ligne peuvent vous confondre. Donc juste être un peu coûté années de tout ce que vous voyez en ligne. Mais tu fais juste attention. J' espère vraiment que le district était intéressant. Merci beaucoup.