Extensions du Navigateur WEB

  quels addons à votre navigateur (pistes 2020)

Le développement Web se faisant, et se testant, sur le web au travers d’un navigateur, les extensions se multiplient (et se normalisent en Web Extensions) pour faciliter les taches du développeur...

Quelques pistes (en vous suggérant de dédier un second Navigateur au développement).

Article publié le 7 mai 2020, et actualisé en juin 2020

   
 
 
 
 
 
 
 
 
 
 
Attention, cette page est encore en
  spipeurs
 
  pratique
 

Le navigateur est l’outil indispensable de vos surfs Internet et navigations sur les sites ; il doit donc rester léger et rapide (et peut-etre déjà bien complété d’extensions ergonomiques).

 Pourquoi un second navigateur ?

Car l’adjonction de vos extensions orientées développement peut ralentir fortement le programme... Donc en dédier un second programme différent pour ces taches de test et mise au point peut être une bonne alternative, en privilégiant alors l’un des deux principaux Chrome ou FireFox (surtout en "Developer Edition") à cet effet, tandis que vous garderez votre navigateur habituel [1] pour vos recherches et navigations courantes.

- Vous sélectionnerez ce navigateur en lien avec votre gestionnaire Web ( Comprendre et Gérer WampServer 3),
- Ensuite vous lui intégrerez les diverses extensions de développement choisies,

  • la liste d’extensions "Web" est pour FireFox (ou ajouter celles de Chrome)
  • le Google WebStore "Développement" pour Chrome.

La liste ci-dessous constitue encore un bloc-notes en-cours, signalant diverses extensions [2] d’analyse, qui ambitionne plutôt d’être "agitateur d’idées".

 Les indispensables

- tous les navigateurs permettent d’afficher le source HTML de la page avec Ctrl U
- FireBug (Lite) est désormais intégré comme ’Inspecteur de page’ avec Ctrl Maj I.
- l’ultra-connu Web Developer pour Chrome, FF et Opera...

 Audit d’une page externe

- identifier les outils utilisés : Wappalyzer ou builtwith....
- mettre en évidence le CSS Layout Debug
- analyser les CSS : CSS Peeper ou CSS Dig
- visualiser les tags HTML avec showHTML (en particulier les Alt & Meta, les Hn avec HeadingsMap ou Heading Tags Markup)
- voir les images en détail HooverZoom+
- analyser les dimensions, Measure-It ou Ruler ... ou Ruler
- reconstituer les palettes de couleurs Site Palette
- identifier les ’Fonts’ (les polices de caractères utilisées), avec WhatFont ou Fonts Ninja, voire Font Picker ou What Font Is, et Font-Finder
- enfin Quick View Sources
- ou une extension fontanello pour visualiser le style d’un élément
Enfin lancer SiteMap Generator va récapituler tous les liens sortant de votre page (dommage que la présentation reste basique en XML)..
Pour la ré-utilisation, html-format-cleaner facilitera la reprise de textes (et... extraira les liens internes..

 Mise au point & validation de votre page

- les extensions VisBug, ou platypus facilitent la modification directe des sources.
- les extensions Total Validator ou Validate HTML et HTML5-Checker
- également un contrôle en ligne
- une synthèse YSlow pour les performances de chargement

 Détail des styles

- visualiser les ancres <a name=".."> suffixant un #
- identifier les couleurs, les palettes : un choix à affiner par exemple...

 La modification des pages

- on rappelle évidemment le SkelEditor disponible par SPIP
- le Try-it HTML5 Editor pour FF et Chrome
- la visaulisation d’erreurs HTML (HTML Validator)
- un editeur HTML/CSS (j’ai aussi trouvé un lien à NotePad++)
- Visual Inspector fcilite la notation collaboraive
- un JS.CSS Beautiful
- un simple Images On-Off
- pour les adeptes de "maquettes" il existe plusieurs outils ’superposant’ une page en-cours de développement à une image-maquette initiale

 L’analyse des styles

le CSSDebug souligne les divers blocs
- l’analyse des CSS inutiles
- ou un générateur CSS3
- un Drag Design
- un DOM HighLighter
CSSPeeper et CSS Viewer (FF / Chrome)

 La visualisation facile du Responsive

- Sizzy
- deux aides réactives BootStrap pour Chrome & FireFox,
et un Bootsrap Grid
- un CSS Sharpes editor
- VisBug
- HTML Diffs

 La gestion de l’accessibilité

- en fonction des déficiences visuelles, Spectrum
- axe-web-accessibility
- avec un validateur AMP
- https://chrome.google.com/webstore/...
- tester les Bones Pratiques
- les performances de la page

 Et la gestion liée avec PHP & Json

- lien avec Xdebug Helper
- l’acces aux pages de Doc PHP
- une extension couplée à JetBrains
- Json est un format de fichier texte, adapté pour gérer des descriptions d’objets structurés, devenu tres utilisé dans le Web

A vous de faire votre marché, et indiquer d’autres idées...


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1] Outre IE et FireFox désormais bien connus, vous pouvez utiliser Brave, Opéra, Vivaldi, Falkon etc..

[2] Les liens indiqués peuvent parfois être dédiés FireFox ou Chrome...à vous de voir.


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.
   

Article publié le 7 mai 2020, et actualisé en juin 2020 spipeurs .

Répondre à cet article