Howto: Le débogage en JavaScript

Trucs et astuces pour faire du débogage en JavaScript

 Publié le 15·04·2023  |  Skeeter

L’objet console

L’objet console donne accès à la console de débogage du navigateur. Les spécificités de fonctionnement varient d’un navigateur à l’autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.

Afficher du texte dans la console

  • console.log() pour afficher un message
  • console.info() pour afficher un message d’information
  • console.warn() pour afficher un message d’avertissement
  • console.error() pour afficher un message d’erreur
[Lire]
JavaScript 

Comprendre les URL

 Publié le 21·01·2020  |  Skeeter

URL signifie Uniform Resource Locator. Il s’agit d’une adresse donnée, unique sur le Web.

Anatomie d’une URL

Voici quelques exemples d’URL :

http://exemple.com
http://www.exemple.com
https://www.exemple.com
http://www.exemple.com/fr
http://www.exemple.com/paris/1

Si on considère l’URL suivante :

http://www.exemple.com:80/repertoire1/repertoire2/fichier1.html?key1=value1&key2=value2#etape3
  • http:// correspond au protocole. Les deux protocoles les plus courants sont HTTP ou sa version sécurisée HTTPS. D’autres protocoles existent, comme MAILTO (ouverture d’un client de messagerie pour envoyer un mail) ou FTP (transfert de fichiers).
  • www.exemple.com correspond au nom de domaine. Il permet de localiser le serveur web qui héberge le contenu. Il est possible d’utiliser une adresse IP à la place.
  • :80correspond au port utilisé sur le serveur web. Il n’est pas utile de les préciser si on utilise les ports standards : 80 pour le protocole HTTP ou 443 pour HTTPS par exemple.
  • /repertoire1/repertoire2/fichier1.html correspond au chemin vers le fichier fichier1.html sur le serveur web. Ce chemin peut être un chemin “physique” (arborescence existante), ou une “abstraction” qui est gérée par le serveur.
  • ?key1=value1&key2=value2 sont des paramètres fournis au serveur Web. Il s’agit ici d’une série de paires de type clé/valeur. Le serveur peut utiliser ces paramètres pour effectuer des actions supplémentaires et adapter ainsi la ressources à renvoyer. Il existe des règles différentes concernant les paramètres et leur format, dépandant du serveur utilisé et de sa configuration.
  • #etape3 correspond à une ancre, située dans le document. Les ancres permettent au navigateur d’afficher directement l’endroit référencé sur le document demandé, afin de faciliter la navigation.
[Lire]
URL 

Modèle de document HTML5

 Publié le 16·01·2020  (Mise à jour le 21·02·2020)  |  Skeeter

Modèle de base

Voici un modèle basique, avec le minimum nécessaire :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>
        <h1>Bonjour !</h1>
    </body>
</html>
[Lire]
HTML  HTML5 

Mémento : DataTables

Table plug-in for jQuery

 Publié le 10·01·2020  (Mise à jour le 25·02·2020)  |  Skeeter

Initialisation

1
2
3

$(document).ready( function () {
    $('#myTable').DataTable();
} );

dom - Options

Permet de définir les contrôles et leur ordre d’apparition sur le tableau. Plus de détail sur la documentation officielle.

Valeur par défaut : lfrtip

  • l - length changing input control
  • f - filtering input (zone de recherche)
  • t - The table! (le tableau, permet d’indiquer sa position)
  • i - Table information summary
  • p - pagination control (contrôle de pagination)
  • r - processing display element

Des extensions sont disponibles :

  • B - Buttons
  • R - ColReorder
  • S - Scroller
  • P - SearchPanes

Il est possible de gérer l’affichage des boutons avec les options suivantes :

dom: "Bfrtip",
buttons: [
    'copy', 'pdf'
]
[Lire]
DataTables  jQuery 

Mémento : Hugo

The world’s fastest framework for building websites

 Publié le 10·01·2020  (Mise à jour le 23·01·2020)  |  Skeeter

Commandes

  • hugo version : affiche la version installée
  • hugo new posts/hello.md : création d’un nouveau post
  • hugo server : lance le site en local, se connecter sur http://localhost:1313
  • hugo server -D : lance le site en local, et affiche le contenu taggé draft
  • hugo server -DF : lance le site en local, affiche les posts drafts et futurs
  • hugo env : affiche la version de Hugo et les informations sur l’environnement
  • hugo config : Affiche la configuration du site

Liens utiles

Hugo