Affichage code source d’une page Web (en ligne) avec un editeur de texte (ici notepad++)

[Wolfie]

A tous ceux comme moi à qui l’outil basique du navigateur —« Code Source de la Page » (je ne parle pas de l’inspecteur qui permet d’identifier rapidement les éléments de classes)— ne suffit pas, je propose une petite technique :

Utiliser un bon éditeur de texte en lui adjoignant une extension permettant d’utiliser des scripts Python et un script efficace pour ouvrir les URLs, car nativement un éditeur de texte ne peut ouvrir à la volée des pages web directement sur le serveur.

Tout d’abord parlons des avantages de cette méthode :

• permet d’afficher le code source de manière plus riche et pratique
• coloration syntaxique (plus lisible)
• numérotation des lignes (repérage rapide)
• recherche avancée (gain de temps)

Permet aussi le « folding », la comparaison entre sources « diff » et l’affichage
et la gestion d’encodage … et plein d’autres trucs encore (Affichage côté serveur vs DOM rendu, possibilités d’automatisation de captures …).

Si à la base le processus est le même sous Linux (Linux dispose déjà de commandes basiques dédiées :  Curl, Wget etc …), je ne vais m’intéresser ici qu’aux utilisateurs de Windows, qui sont les plus lésés en la matière (et d’une façon plus globale, mais c’est une autre histoire).

Requis :

• Notepad ++
• PythonScript (extension)
• Un script spécifique pour ouvrir les URL (celui que je vous propose)

Notepad++ est un éditeur de texte très performant et axé « coding » (en licence GPLv3 ), d’autre part il existe des kilomètres d’extensions (vous pourrez même créer les vôtres). Cet éditeur remplacera à merveille l’infâme daube d’origine. Vous le trouverez ICI.

Une fois téléchargé et installé (pour ceux qui ne l’auraient pas déjà) :

Il faut installer l’extension qui permet d’ouvrir et de traiter les scripts Python.

Chercher et installer : Python Script dans la liste des extensions dispo !

Modules d’extension > Gestionnaire des modules d’extension > Disponibles
cocher : [ X ] PythonScript
puis [ Installer ]

Redémarrer Notepad ++.

Il doit désormais figurer dans la rubrique Installés du Gestionnaire.

Il faut maintenant télécharger et installer le script :

Vous trouverez mon petit script ICI.

Une fois le contenu de l’archive extrait, lancez Notepad++, puis dans le menu Modules d’extension : PythonScrip > New script

pointez alors vers le script (PY) que vous venez d’extraire.

Cette opération copiera le script dans :
%appdata%\Notepad++\plugins\config\PythonScript\scripts
et paramétra l’extension pour son usage.

Redémarrez Notepad++

Vous pourrez désormais y accéder depuis Modules d’extension > Python Script > Scripts > Ouvrir URL.py

Une astuce pour l’avoir directement à portée de main :

L’ajouter dans la barre outil de Notepad ++

Modules d’extension > Python Script > Configuration

Sélectionner le « user script » adéquate (ici Ouvrir_URL.py)

Redémarrez Notepad++

Et désormais vous l’avez directement dans la barre outil sous forme d’une icône de script Python.

On peut aussi de la même façon l’ajouter à la barre des menus, mais c’est idiot car il est dans le sous-menu de l’extension.

Lancez le script et renseignez une URL de page Web.

Votre éditeur de texte (NP++) affiche maintenant directement la page Web à l’instant t, telle quelle est sur le serveur.

Sauvegarder le fichier TXT qui vient d’être généré, et vous aurez la coloration syntaxique.

NB: après quelques tâtonnements (je me faisais jeter par les serveurs), j’ai simulé des user-agents pour des navigateurs courants.

L’archive ZIP contenant le script, contient un LISEZ-MOI qui explique tout ça !

En espérant que ça puisse servir à certains ici.

[Violence]

Perso sosu Vivaldi, j’ai la colortion synthaxique directe via le navigateur.

Sinon un copier/coller dans Visual Studio Code et c’est bon.

[Wolfie]

@Violence

Avec les outils du navigateur le vrai problème c’est la pagination : moi ça me prend la tête de faire défiler latéralement des lignes qui n’en finissent pas. Avec l’éditeur de texte paramétré pour “retour automatique à la ligne” c’est selon moi plus fonctionnel et plus pratique. En plus on a les fonctions de recherche (éventuellement de remplacement) directement sous la main. Et puis tout le monde n’a pas l’environnement pour une install de Visual Studio et du Software Dev Kit. Donc ça peut servir, c’est un moyen simple et efficace à peu de frais.

PS: Sinon je n’ai pas pigé pourquoi “sujet non résolu”, je suppose que c’est la rubrique dans laquelle je l’ai posté qui rajoute ça. Mais je n’ai pas trouvé de rubrique plus adéquate ! Sinon il y a aussi d’autres avantages, mais c’est un peu longuet à expliquer LOL !

[Ripley]

Je passais par là, j’ai lu en diagonale… mais je pige pas tout.

Notepad++ supporte HTML nativement parmi ses 87 langages intégrés. il y a déjà la coloration automatique. Sans plugin, sans script, sans rien.
Firefox fait la coloration sur Ctrl+U nativement aussi. Vivaldi et d’autres navigateurs pareil.

Donc le script sert à qui exactement ?
Si je résume ce que j’en ai vu, c’est un plugin pour Notepad++ qui :

• Demande une URL à l’utilisateur
• La télécharge via curl en simulant un navigateur Firefox via le useragent
• Affiche le HTML brut dans un nouvel onglet Notepad++

Un utilisateur normal ne regarde jamais le code source d’une page, il n’en a cure et ça ne lui sert à rien, et un dev possède curl, wget, les DevTools, visual Studio Code et d’autres outils/plugins des éditeurs/création de code. il installe pas un script Python pour ça.

Le word wrap je te l’accorde, c’est le seul truc valable. Mais pour ça il y a le retour automatique à la ligne dans n’importe quel(s) éditeur(s).

C’est un outil qui cherche son public j’ai l’impression non ?