Soru:
Küçültün JavaScript üzerindeki etkilerini tersine çevirmek için iyi araçlar nelerdir?
WPrecht
2013-03-20 19:15:38 UTC
view on stackexchange narkive permalink

Küçültmenin etkilerini tersine çevirebilecek herhangi bir komut dosyası ve / veya çevrimiçi araç var mı?

Özellikle küçültülmüş bir JavaScript dosyasını küçültmek istiyorum. Değişken yeniden adlandırma büyük bir sorun değil, yürütmeyi analiz edebilmek için yeterince okunabilir olmasını istiyorum.

Herhangi biri olumsuz oylamaya gitmeden hemen önce, [sorunuzu sormanız ve yanıtlamanız uygundur] (http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions /). Aslında harika ve siteye yardımcı oluyor! Güzel soru, WPrecht :-)
Teşekkürler. Kapalı betada siteyi kurmaya yardımcı olmak için buna benzer şeyler yapacağımızı varsaymıştım.
@Keelan: ne yazık ki bazı insanlar aynı fikirde değil. [Durumda belirtin] (https://reverseengineering.stackexchange.com/questions/137)
@0xC0000022L Er ... silinmiş. Bu senin davan mı?
@SamB silinmiş olduğu gerçeği değil. Hayır. Son altı yıl içinde silindi (aslında kapatıldıktan yaklaşık bir ay sonra silindi, yani yaklaşık olarak benim yorumum sırasında). Yeterince itibara sahipseniz, yine de görebilirsiniz.
Dört yanıtlar:
#1
+21
Archenoth
2013-03-21 11:49:12 UTC
view on stackexchange narkive permalink

Özellikle, küçültülmüş bir JavaScript dosyasını küçültmek istiyorum. Değişken yeniden adlandırma büyük bir sorun değil, yürütmeyi analiz edebilmek için yeterince okunabilir olmasını istiyorum.

Soru başlığınız yalnızca küçültülmüş kodu tersine çevirmeyi gösteriyor ve mutlaka anlaşılmıyor. Ama bunu anlamaya çalışıyorsanız, Opera Dragonfly kulağa çok faydalı bulabileceğiniz bir araç gibi geliyor ...

Ben her zaman küçültülmüş kodu analiz etmek için Dragonfly'ı kullandım. Güzel bir yazıcıya sahip olmanın yanı sıra, inanılmaz derecede kullanışlı analiz işlevine de sahiptir.

İşte küçültülmüş ihtişamıyla jQuery.min ... jQuery, in all its minified glory.

Daire içine aldığım düğme işte kodu birdenbire böyle bir şeye dönüştüren güzel yazıcı: Beautified jQuery.min

Bu güzel bir başlangıç, ancak yürütme sırasında neye benzediğine dair bir fikriniz olmadan anlamak hala çok zor.

Öncelikle, küçültülmüş bir dosyanın işlevselliğinin hangi bölümünü anlamaya çalıştığınızı belirlemeniz gerekir. Etkinlik kesme noktaları bunun için inanılmaz derecede kullanışlıdır çünkü bunları hemen hemen her kullanıcı girdisi için veya bir öğenin yükü için ayarlayabilirsiniz. Örneğin, bir fareyle üzerine gelme olayı gerçekleştiğinde jQuery'de ne olduğunu görmek istersem, "mouseover" için bir olay kesme noktası ekleyebilirim. Bu şekilde, faremi belirli bir öğenin üzerine getirdiğimde koda giriş noktasının nerede olduğunu görebilirim.

Kodunuz bir kesme noktasına ulaştığında, birçok DOM'da olduğu gibi yapabileceğiniz bir moda geçersiniz. hata ayıklayıcılar, incelediğiniz kodun mevcut durumuyla etkileşime girer. Ancak, fareyi kod bölümlerinin üzerine getirerek bunu yapabilirsiniz, böylece kod bağlamını akılda tutmak gerçekten oldukça kolaydır.

Event breakpoint and analysis.

Ayrıca, kaynak pencerede yapabildiğiniz gibi kapsamı ve Kimin Komut Dosyaları sekmesindeki "Durum" alt sekmesinden neye başvurduğunu da inceleyebilirsiniz. Böylece, bir değişkenin başka bir değişkeni geçersiz kılıp kılmadığını veya bir yerde süslü kapanış büyüsü olup olmadığını veya bir değişkenin gerçekte hangi kapsamdan kaynaklandığını görebilirsiniz. Ayrıca bir DOM öğesine bakarsanız, sayfada vurgulamak için fareyi üzerine getirebilirsiniz. (Son resme bakın.)

State tab.

Dragonfly konsolunda fareyle üzerine gelme işlevi de vardır ... Ayrıca her şey sekme tamamlama özelliğine sahiptir, böylece herhangi bir durumdan herhangi bir kodu çalıştırabilirsiniz, herhangi bir yürütme düzeyini inceleyin, değişkenleri yeniden atayın, testleri çalıştırın veya baktığınız kodun ne işe yaradığını anlamak için hemen hemen her şeyi yapmak için [Tab] tamamlama ile dolaşın. Console tab.

Opera müfettiş, küçültülmüş veya gizlenmiş kodu tersine çevirmeye ve anlamaya kesinlikle yardımcı olacaktır.

#2
+15
Devdatta Tengshe
2013-03-21 10:16:22 UTC
view on stackexchange narkive permalink

Google Chrome'un Geliştirici Araçlarında yerleşik olarak bulunan güzel yazıcıyı kullanmayı tercih ediyorum.

İşte küçültülmüş Kod: enter image description here

Güzel yazdır düğmesine bastığınızda, aşağıdaki: enter image description here

#3
+8
WPrecht
2013-03-20 19:15:38 UTC
view on stackexchange narkive permalink

Başlamak için iyi bir yer JSBeautifier 'dır. Genel olarak, kullanılan küçültme yöntemine bağlıdır. Bu, kodu biçimlendirir ve birçok seçeneğe sahiptir. Ayrıca "paketlenmiş" komut dosyalarını da açabilir (Dean Edward'ın paketleyicisi ile birlikte). Bu kodun kullanışlı bir çeşidi, bir Firefox eklentisi Javascript Deminifier olarak mevcuttur.

#4
+6
JulianHarty
2017-02-11 00:21:45 UTC
view on stackexchange narkive permalink

Kısa bir süre önce http://www.jsnice.org/ ’da, Cordova’nın çalışma zamanının yürütmeyi reddettiği çok sayıda dinamik değişiklik kodu içeren küçültülmüş tek bir JavaScript dosyasının 50 + KB’ı üzerinde denedim (hedeflenen bir uygulama için Windows Phone 8.1 ve Windows 10'da). Binlerce açık kaynaklı projeden küçültülmemiş olarak mevcut olan eşleşen kod parçalarını tanıdığı için sonuçlar şaşırtıcıydı. Umarım gelecekte size ve başkalarına yardımcı olur.

jsnice en iyisidir. Değişken isimleri yeniden düzenlenmediğinde küçültme çok değerli değildir ve bu listedeki diğer öğelerden hiçbiri bunu sizin için yapmaz.


Bu Soru-Cevap, otomatik olarak İngilizce dilinden çevrilmiştir.Orijinal içerik, dağıtıldığı cc by-sa 3.0 lisansı için teşekkür ettiğimiz stackexchange'ta mevcuttur.
Loading...