C’è un plug-in che mi consente di annullare automaticamente il Javascript incluso in un sito?

Esiste un plug-in, un componente aggiuntivo, uno script Greasemonkey o qualcosa di simile (nella peggiore delle ipotesi , un proxy facile da usare?) Che disinstalla automaticamente i file Javascript inclusi in un sito?

So ad esempio jsbeautifier.org ma farlo esternamente non mi consente di impostare i breakpoint nel codice non terminato, per esempio.

Casi d’uso tipici per me:

  • Analizzando e imparando da complessi web frontend.
  • Debug degli script di Greasemonkey che interagiscono con il codice esistente.

Sono interessato principalmente a una soluzione che funziona con Firebug, ma se c’è qualcosa per gli strumenti di sviluppo di Chrome o Opera, mi piacerebbe sentirne parlare anche io.

In chrome 13+, c’è “pretty print”.

  1. Fare clic con il tasto destro ‘inspect element’
  2. Vai alla scheda Script
  3. Fai clic sulle parentesi graffe in basso a destra.

Immagine dello schermo

Qualcuno ha trasformato JSBeautifier in un plugin Firebug:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

Questo ha reso la mia giornata di oggi!

Il debugger JavaScript di Venkman ha una bella stampante.

C’è anche un’estensione per il proxy Fiddler.

Gli strumenti di sviluppo di IE9 hanno anche un’opzione “formato javascript” (vedi “Strumenti per gli sviluppatori F12 e script di formattazione min.” Qui )

A proposito, la stessa funzionalità è disponibile negli strumenti di sviluppo F12 di IE9: con la scheda script aperta, selezionare il pulsante martello / chiave inglese sulla barra dei pulsanti (“Configurazione”) e selezionare “Formato JavaScript”.

Se lo script viene solo limitato per spazi bianchi, alcune delle soluzioni offerte potrebbero funzionare. Come dici, JSBeautifier è uno strumento utile.

Tuttavia, se il JavaScript che stai guardando è stato compresso con uno strumento come YUI Compressor o Google Closure Compiler , le variabili saranno più brevi e più difficili da comprendere.

Per vedere questo in azione, confrontare le versioni minified e non ancora terminate di jQuery (versione minified utilizza Closure Compiler).

Per l’objective di imparare JavaScript, ti consiglio di imparare da librerie e plugin scritti da alcuni dei migliori sviluppatori di JavaScript. Guarda il codice sorgente di jQuery , YUI , Moo Tools . Guarda il codice su GitHub da persone come John Resig o Thomas Fuchs . Leggi DailyJs e guarda i suoi esempi.

Spero che alcuni di questi strumenti ti aiutino nel processo di apprendimento. Queste sono le risorse che mi hanno aiutato di più.

Webkit / Chromium ora possono fare anche questo, vedi Webkit Bug 57942 , Changeset 83713 e il riassunto delle modifiche di Peter Beverloo che menziona questo .

Non chiedetemi di iniziare con quale versione di Chromium / Chrome è disponibile, ma sentitevi liberi di menzionare qui se lo sapete. 🙂

L’impostazione “Auto Prettify Minified Sources” di Firefox Firefox Developer Tools triggers la funzionalità Prettify Source per impostazione predefinita.

Per abilitarlo:

  • apri gli Strumenti per sviluppatori di Firefox (Ctrl + Shift + I)
  • Scheda Debugger
  • icona del motore in alto a destra nella scheda Debugger, non nel motore delle impostazioni globali

inserisci la descrizione dell'immagine qui

Questo è documentato su: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file

Testato su Firefox 42.

Non è ansible con gli strumenti attuali. Mostra gli script di eval è il massimo che puoi ottenere. Jsbeautifier.org è una bella cosa aperta e qualcuno può integrarlo con info firebug.

PrettyPrint è una bella estensione per Chrome per questo, si distriggers automaticamente js in un battito cardiaco mentre si utilizza la sorgente normale (Ctrl-U).

Puoi ottenerlo qui:

https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg/