Javavripts leggibili dall'uomo negli strumenti di sviluppo di Chrome

142

qualcuno sa se Chrome Developer Tools è in grado di formattare javagram in forma leggibile dall'uomo? Qualche tipo di bellezza sarebbe utile. Diciamo che sto usando alcune librerie JS e ho bisogno di creare un'istanza del suo oggetto, in modo da sapere cosa mettere nel costruttore. Ma cercare in questa enorme libreria che ha 4 righe nell'interfaccia utente di Chrome Developer Tools è abbastanza fastidioso ...

Altrimenti il lato server deve occuparsi dell'implementazione della "modalità dev" che fornisce file javascript che non sono minimizzati ...

javascript google-chrome-devtools

— Lisak
fonte

abbastanza sicuro che non è possibile, ma spero di sbagliarmi perché sarebbe una bella caratteristica.

— Zevan,

L'ho fatto, ma l'assenza di questa funzione è abbastanza sorprendente, quindi è meglio che lo chieda qui

— lisak

Versione Firebug: stackoverflow.com/questions/4279319/...

— Ciro Santilli郝海东冠状病六四事件法轮功

Risposte:

331

Alcuni browser hanno un pulsante Stampa carina che assomiglia a questo {}e appare per HTML, JS e / o CSS a seconda del browser.

Chrome lo ha nella scheda Sorgenti :

Chrome 40 grazioso pulsante di stampa

Firefox lo ha nella scheda Debugger

Firefox 35 pulsante preimpostazione sorgente :

La posizione di questi pulsanti può cambiare, ma dovrebbe essere sempre presente

— fgm2r
fonte

Su Windows è una piccola icona che ricorda -> {}. La didascalia dice Pretty Print.

— omninonsense,

@con Grazie per averlo menzionato. Mi chiedo perché l'hanno implementato in modo diverso su Windows / Mac OS.

— fgm2r,

qualcuno sa cosa è successo a questa funzione di Chrome? Penso di averlo visto in passato nel mio Chrome, ma ora sembra sparito.

— superjos

@superjos Lo hanno cambiato per essere lo stesso su Mac OS e Windows ora.

— fgm2r

uhm, ma non riesco nemmeno a vederlo nel menu contestuale. È presente solo il comando "Ispeziona articolo". Vedi screenshot .

— superjos

Non c'è l'icona Pretty Print (sembra: {}), almeno su Windows ce n'è una, nella scheda Script?

— omninonsense
fonte

C'è il http://jsbeautifier.org/ per l'utilizzo online ( è necessario copiare / incollare ).

Su quel sito hanno un collegamento a fiddler ( un proxy di debug web ) e un formatter JavaScript per esso ( terza estensione ).

— Gabriele Petrioli
fonte