Vom Menschen lesbare Javaskripte in Chrome-Entwicklertools

142

Weiß jemand, ob Chrome Developer Tools Javascripts in lesbare Form formatieren kann? Eine Art Verschönerer wäre praktisch. Angenommen, ich verwende eine JS-Bibliothek und muss deren Objekt instanziieren, damit ich weiß, was in den Konstruktor eingefügt werden soll. Das Durchsuchen dieser riesigen Bibliothek mit 4 Zeilen in der Benutzeroberfläche von Chrome Developer Tools ist jedoch ziemlich ärgerlich ...

Andernfalls muss sich die Serverseite um die Implementierung des "Dev-Modus" kümmern, der Javascript-Dateien liefert, die nicht minimiert sind ...

javascript google-chrome-devtools

— lisak
quelle

Ich bin mir ziemlich sicher, dass das nicht möglich ist, aber ich hoffe, dass ich falsch liege, weil es eine nette Funktion wäre.

— Zevan

Ich habe es getan, aber das Fehlen dieser Funktion ist ziemlich überraschend, deshalb habe ich hier besser gefragt

— lisak

Firebug-Version: stackoverflow.com/questions/4279319/…

— Ciro Santilli 法轮功冠状病六四事件 16

Antworten:

331

Einige Browser haben eine hübsche Druckschaltfläche , die so aussieht {}und je nach Browser für HTML, JS und / oder CSS angezeigt wird.

Chrome hat es in der Registerkarte Quellen :

Chrome 40 hübscher Druckknopf

Firefox hat es in der Registerkarte Debugger

Firefox 35 verschönert die Quellentaste ::

Die Position dieser Tasten kann sich ändern, sollte aber immer vorhanden sein

— fgm2r
quelle

Unter Windows ist es ein kleines Symbol, das -> {} ähnelt. Bildunterschrift sagt Pretty Print.

— Omninonsense

@with Danke, dass du das erwähnt hast. Ich frage mich, warum sie es unter Windows / Mac OS anders implementiert haben.

— fgm2r

Weiß jemand, was mit dieser Chrome-Funktion passiert ist? Ich glaube, ich habe das in der Vergangenheit in meinem Chrome gesehen, aber jetzt scheint es weg zu sein.

— Superjos

@superjos Sie haben es jetzt so geändert, dass es unter Mac OS und Windows gleich ist.

— fgm2r

Ähm, aber ich kann das nicht einmal im Kontextmenü sehen. Es ist nur der Befehl 'Element prüfen' vorhanden. Siehe Screenshot .

— Superjos

Gibt es nicht das Pretty Print-Symbol (sieht aus wie: {}), zumindest unter Windows gibt es eines auf der Registerkarte "Skripte"?

— Omninonsense
quelle

Es gibt http://jsbeautifier.org/ für die Online-Nutzung ( Sie müssen kopieren / einfügen ).

Auf dieser Site haben sie einen Link zu Fiddler ( einem Web-Debugging-Proxy ) und einen JavaScript-Formatierer dafür ( 3. Erweiterung ).

— Gabriele Petrioli
quelle