2

たとえば、Aptana というツールをダウンロードするためのこの Web サイトがあるとします。

http://www.aptana.com/products/studio3/download

そのページの下部に、「ダウンロード」という意味の大きな青いボタンがあります。しかし、そのボタンを右クリックしてアドレスのコピーを選択し、貼り付けると、現在の URL にポンド記号が追加されているだけなので、単純な html リンクではないことがわかります。ダウンロード URL からのダウンロードを開始する JavaScript で何かが発生しています。

google chrome の dev-tools などのデバッグ ツールを使用して、このダウンロード リンクがどこから来ているのかを特定するにはどうすればよいですか?

最初のステップ (クロム) は、ボタンを右クリックして選択することだと理解しています。

Inspect Element -->  Event Listeners (right pane) --> click --> main.js (link)

そして、ボタンが押されたときに実行されるJavaScriptコードが表示されます（少なくともそう思います）。そこから、2 つの中かっこ '{}' のようなボタンを押すと、JavaScript コードが見やすくなります。しかし、この段階では、webapp がコード内のどこで直接 URL のダウンロードを開始するか (これは の行に沿ったものです) を発見する目的を理解するためにどのような手順が取られるかわかりません。

ランダムにコードをデバッグしてステップオーバーしているときに運が良かったので、289行目を見つけました

if (Q) {
     for (var a, b = 0; a = Q[b++]; )
         a.call(s, c);
     Q = null
}

式の文字 a にマウスを合わせるとa.call(s,c);、ポップアップに直接ダウンロードへの http リンクが表示されます。 

function (){
    document.location = "http://download.aptana.com/studio3/standalone/3.4.0/linux/Aptana_Studio_3_Setup_Linux_x86_3.4.0.zip";
}

ここで物事の根底に到達するための専門的な方法は何ですか? 識別すべきフレームワーク/ライブラリ マーカーはありますか? このようななじみのないコードをステップスルーする方法についての理論はありますか? また、私を支援するために使用できたのに見逃したショートカットはありますか? 「document.location」というフレーズは、検索を開始するために知っておくべきだったものだと思い始めています。そのような「指示」への参照をどのように検索しますか?

4

1 に答える 1

2

ボタンをクリックする前に、Web インスペクタを開き、[ソース] パネルに移動します。ボタンを押し一時停止てから、ダウンロードボタンをクリックしてください。JavaScript デバッガーは、イベント ハンドラーで中断します。実際のハンドラーに到達するまで、コードをステップ実行します。

// submit download form
$(".submit-aptana-download-form").click(function(){
  $("#aptana_download_form").submit();
  return false;
});

出来上がり。

フレームワークに関しては、デバッガーに入ってから名前を見ると、jQuery を使用していることがわかります。おそらく同様のヒューリスティックを使用できます。

于 2013-05-02T04:37:59.827 に答える