Maîtrisez la Console et ses outils !

Explorez la boîte à outils du développeur

4.65 (54 reviews)
Udemy
platform
Français
language
Web Development
category
instructor
267
students
1.5 hours
content
Nov 2023
last update
$19.99
regular price

What you will learn

Utilisez la console

Debugger

Améliorer la performance de son site et de ses apps

Faire un audit complet

Gérer le côté responsive d'un site

Description

C'est parti pour le cours sur la console et les DevTools !

Trop de développeurs se contentent d'utiliser l'onglet "Console" lorsqu'ils codent avec Chrome/Firefox/etc...
Alors que les navigateurs proposent des boîte à outils regorgeant de fonctionnalités géniales.

Découvrons-les ensemble.

1. Inspecter le DOM de notre site

Le DOM, Document Object Model, est la représentation d'un site sous la forme d'un arbre d'objets, créés à partir des fichiers fournis, tel que l'HTML, le CSS et le JavaScript.

Nous allons pouvoir l'observer et le modifier grâce aux DevTools et au panneau "Elements".

2. Debugger notre JavaScript
Il n'y a pas que la méthode "console.log()" qui peut nous aider à débugger notre JS, le panneau source nous donne accès à de puissants outils de deboggage.

3. Changer le CSS à la volée

Toujours grâce au panneau "Elements", nous allons pouvoir analyser le CSS appliqué à chaque élément, et effectuer toutes sortes de changements sur ces derniers.


4. Améliorer les performances de nos sites

Le bien nommé panneau "Performances" va nous permettre de détecter s'il y a quelque chose qui cloche lors du chargement ou des animations d'un site.

5. S'occuper de la mémoire en JS

Autre source de problèmes courants, la mémoire !
On va pouvoir mettre fin aux memory leaks grâce à l'onglet "Memory"


6. Faire un Audits complet d'un site.

Les devtools nous donnent accès à l'onglet "Lighthouse"(anciennement "audit"), qui nous permet tout simplement de faire passer des tonnes de test à un site.

S'ensuit une série de conseils afin d'améliorer notre création au niveau du SEO, des performances, de l'accéssibilité, etc...


7. Le réseau

Le panneau "network" nous permet de voir ce qui se passe au chargement d'un site, au niveau des fichiers, des images, ou lors d'appels vers des APIs.

Et bien d'autres choses encore !
On se donne rendez-vous de l'autre côté pour commencer tout ça.

Content

Introduction

Introduction

Le cours

Vue d'ensemble : Qu'est ce que la console ?
Code source
Découverte des méthodes liées à la Console
Explication des icônes
Panneau Elements
Mode Responsive
Panneau Network
Sources et Debug
Faire un Audit
Panneau "Memory"
Le "Console Drawer"
Les fonctionnalités du Drawer
Application
Et Firefox dans tout ça ?

Screenshots

Maîtrisez la Console et ses outils ! - Screenshot_01Maîtrisez la Console et ses outils ! - Screenshot_02Maîtrisez la Console et ses outils ! - Screenshot_03Maîtrisez la Console et ses outils ! - Screenshot_04

Reviews

Reynier
July 30, 2023
Très clair, va droit à l'essentiel. Je découvre des fonctionnalités dont j'ignorais tout ex : console.time() et même console.error(). Cette formation est incontournable car on a besoin de google dev tools à tout moment et sincèrement c'est assez peu transmis lors des formations. Merci encore je suis très satisfaite
Vianney
January 31, 2023
Plutôt complet dans l'ensemble, parfois ça aurait pu être cool de rajouter quelques p'tits tips, genre debugger; qui permet en js de créer un point d'arrêt dans le code par exemple. Et autre chose, je trouve que tu parles un peu trop vite, sinon très bien. Merci
Herve
January 4, 2023
Grosse déception ! On n'apprend pas grand chose. L'auteur abuse de "tac tac", "hop hop", "etc etc", "voilà voilà", sans parler du franglais. Peu de choses sont expliquées, on passe sur les différents onglets sans apprendre grand chose...
Mickael
December 1, 2022
Je viens de finir le cours sur la console. Ce qui est bien c'est qu'il explique vraiment tous les onglets et les détails. Étant débutant je ne sais juste pas comment m'en servir sur de vrai site manque peut être d'exemple réellement concret. mais passage obligatoire pour continuer l'apprentissage de l'informatique des outils d'un navigateur web.
Manon
March 15, 2022
Formation très complète et pertinente, un peu technique par moment pour une néophyte. Serait bien de ralentir un peu le débit....pour bien intégrer toute la matière :-)
Pascal
November 19, 2020
Excellent , un peu rapide, peu être plus de détails dans les exemples pratiques. Mon attente: Une formation sur Visual Studio Code. Avec les paramétrages CSS, Js et PHP. Voir Symfony. Merci pour vos formations sur Udemy.
Giovanni
April 16, 2020
Bonjour oui je suis satisfait. Tout fonctionne bien et je comprend mieux l'utilisation de la console.
William
March 18, 2020
Belle formation qui apprend plein de chose. J'aurais peut-être aimé avoir un fil rouge. Un projet que que l'on corrige et optimise de A à Z pour bien comprendre quels outils sont les plus importants et appuyer sur leurs utilisations. Merci pour cette formation
Gilles
January 10, 2020
Salut Enzo, Impec! merci, j'ai appris plein de trucs! Ta formation semble couvrir à peu près tout ce qu'il y a à dire, je pense. Il y à beaucoup de chose à retenir. Peut être un petit point à rajouter concernant la cascade css. Pour toi ça doit sembler évident mais pour les débutants, je pense qu'il serait bien de détaillé avec un exemple l’héritage d'un parent/ enfant css merci A bientôt!

Charts

Price

Maîtrisez la Console et ses outils ! - Price chart

Rating

Maîtrisez la Console et ses outils ! - Ratings chart

Enrollment distribution

Maîtrisez la Console et ses outils ! - Distribution chart
2744920
udemy ID
1/7/2020
course created date
1/10/2020
course indexed date
Bot
course submited by