Comment prendre des captures d'écran sur Google Chrome
Dans cet article, nous vous montrerons comment prendre des captures d'écran d'éléments de page Web spécifiques ou toute la page Web à l'aide d'outils de développeur Google Chrome.
Sujet du contenu:
- Ouvrir les outils de développeur Google Chrome
- Sélection d'un élément spécifique dans la page Web à l'aide d'outils de développeur Google Chrome
- Prendre des captures d'écran des éléments de la page Web à l'aide d'outils de développeur Google Chrome
- Prendre des captures d'écran de la page Web complète à l'aide d'outils de développeur Google Chrome
- Conclusion
- Les références
Ouvrir les outils de développeur Google Chrome
Pour ouvrir les outils de développeur Google Chrome, exécuter le Google Chrome, visitez la page Web dont vous souhaitez prendre des captures d'écran et appuyez sur + + je.
Si vous avez besoin d'aide pour ouvrir les outils de développeur Google Chrome, lisez l'article sur la façon d'ouvrir les outils de développeur Google Chrome.
Sélection d'un élément spécifique dans la page Web à l'aide d'outils de développeur Google Chrome
Si vous souhaitez prendre des captures d'écran d'un élément spécifique à partir de la page Web à l'aide des outils de développeur Google Chrome, vous devez être en mesure de sélectionner l'élément que vous souhaitez prendre des captures d'écran de la page Web.
Vous pouvez sélectionner un élément dans la page Web dans l'onglet "Elements" des outils de développeur Google Chrome.
Vous pouvez également utiliser l'outil «Inspecter» des outils de développeur Google Chrome pour sélectionner un élément dans la page Web.
Pour utiliser l'outil Inspecter, cliquez sur
du coin supérieur gauche des outils de développeur Google Chrome.
Sélectionnez l'élément que vous souhaitez prendre une capture d'écran de la page Web. Une fois l'élément sélectionné, la section de code HTML doit également être sélectionnée automatiquement dans l'onglet «Elements».
Prendre des captures d'écran des éléments de la page Web à l'aide d'outils de développeur Google Chrome
Pour prendre une capture d'écran de l'élément de page Web sélectionné, cliquez avec le bouton droit sur l'élément parent HTML sélectionné dans l'onglet "Elements" et cliquez sur "Capturez la capture d'écran du nœud".
Une capture d'écran de l'élément de page Web sélectionné doit être prise et enregistrée sur votre ordinateur.
Comme vous pouvez le voir, une capture d'écran de l'élément de page Web sélectionné est prise avec succès.
Essayons de prendre une capture d'écran d'un autre élément de page Web à l'aide des outils de développeur Google Chrome.
Sélectionnez la table des matières dans l'un des articles LinuxHint, cliquez avec le bouton droit sur elle et cliquez sur la «capture d'écran de capture» pour prendre une capture d'écran comme nous l'avons fait récemment.
Une capture d'écran est maintenant prise et enregistrée.
Comme vous pouvez le voir, une capture d'écran de seule la table des matières est prise.
Prendre des captures d'écran de la page Web complète à l'aide d'outils de développeur Google Chrome
Pour prendre une capture d'écran de la page Web complète, accédez à l'onglet "Elements" des outils de développeur Google Chrome. Faites défiler tout le long et sélectionnez la balise HTML. Cela sélectionne toute la page Web.
Maintenant, cliquez avec le bouton droit (RMB) sur la balise HTML et cliquez sur "Capturez la capture d'écran du nœud".
Une capture d'écran de toute la page Web doit être prise et enregistrée sur votre ordinateur.
Comme vous pouvez le voir, la capture d'écran de la page Web complète est prise avec succès.
Conclusion
Nous vous avons montré comment ouvrir les outils de développeur Google Chrome. Nous vous avons également montré comment sélectionner des éléments de page Web spécifiques à l'aide de l'outil Inspecter des outils de développeur Google Chrome et comment prendre des captures d'écran d'éléments de page Web spécifiques et la page Web complète à l'aide d'outils de développeur Google Chrome.
Les références:
- https: // développeur.chrome.com / blog / new-in-devtools-62 / # node-screenshots