"Web source of hidden" and JS debugging

Recently, when grasping the bag, found a lot of "strange" phenomenon. Click on the button, the first get package contains a key value directly. This key value at that time how to come of full head of fog!

It was very confusing, the main reason is that the key value is generated in the first get package, not the various types of packets behind the generation! including Web page type, JS.

Later only the anti-push thinking, unexpectedly when the click button after the emergence of the first package there is such a value, then this value should be the Click button exists in the page should exist.

To prove my inference, I use Google development tools to see the code in the click-button area, and the key value to find is there.

When this key is greeted, it is ecstatic. Sure enough on the page.

I quickly click on the right button to view the source code, search key, at this time the "strange" phenomenon has appeared, unexpectedly search key. Is it possible that my eyes are wrong? I contrasted a few and found the problem.

If you want to see Google's development tools can be found, but not in the source of Web pages.

Combined with the above two graphs, we found that there should be a div (Choose-btn-qiang) below the div (choose-amount FL).

We have to respect the facts and find out the cause of the problem. Because I was the first time to encounter such a situation, dare not to jump to conclusions, can only do the following judgments:

A div that's hidden in some way

Two this broken div dynamic loading through JS, there is no static page source. When an event is triggered, JS dynamically calls in a section.

Finally, a variety of feelings let me have to look at the page JS file, although very reluctant.

As we all know, JavaScript is able to operate on the page Div, then only go to the JS file to find the div (Choose-btn-qiang).

So far, although there are a lot of problems, but the direction and speculation are correct, it is only a matter of time to find this div. The back was finally found inside the qiang.js.

Here's some code:

var Qiang = {
Originbuyurl: $ (' #InitCartUrl '). attr (' href '),
Init:function (A, b) {
This.sku = A | | PageConfig.product.skuid,
This.key = B | | PageConfig.product.skuidkey,
This.btnwrap = $ (' #choose-btns '),
THIS.BTNTPL = {
A: ' <div id= ' Choose-btn-qiang "class=" btn Disabled "><a class=" Btn-qiang "href=" #none ">{t}<b></b ></a></div> '
},
This.get ()
},

Get:function () {
var a = this;
var b = ' http://yushou.jd.com/youshouinfo.action?sku= ' + this.sku;
var c = pageConfig.product.specialAttrs &&/isko/.test (PageConfig.product.specialAttrs.join ('-'));
C && (b = ' http://item.ko.jd.com/itemShowBtn?skuId= ' + this.sku),
$.ajax ({
URL:B,
DataType: ' Jsonp ',
Success:function (b) {
' 1 ' = = = B.type? (A.set (b), Pageconfig.qiang =!0): ' 2 ' = = = = B.type? (A.setstage2 (b), Pageconfig.qiang =!0): ' 3 ' = = = = B.type? (A.setko (b), Pageconfig.qiang =!0): Pageconfig.qiang =!1
}
})
},

In fact, we should look at the most important paragraph:

var Qiang = {
Originbuyurl: $ (' #InitCartUrl '). attr (' href '),
Init:function (A, b) {
This.sku = A | | PageConfig.product.skuid,
This.key = B | | PageConfig.product.skuidkey,
This.btnwrap = $ (' #choose-btns '),
THIS.BTNTPL = {
A: ' <div id= ' Choose-btn-qiang "class=" btn Disabled "><a class=" Btn-qiang "href=" #none ">{t}<b></b ></a></div> '
},
This.get ()
},

We can see from the above code that the object's key value is given by a variable B. Bold speculation, is it possible to debug by JS Breakpoint to get the K value? In fact, I was not in the heart of the spectrum, only try.

This time we need to use a JS debugging artifact, firefox browser debugger!

Here the breakpoint where to note, because the generation of B value to use the following get:function (), so the next to 54 rows.

Now let's start debugging and refresh the page. Here are the results of the debugs we get:

If the B value already appears. "http://yushou.jd.com/youshouinfo.action?sku=1478342961" This paragraph is we need B value, we must ask, this with our key what relationship,

Don't be impatient, copy this paragraph to the browser to open, we get the following information:

{"Type": "1", "num": 437, "D": 323701, "flag": false, "stime": "", "ETime": "2015-04-05 10:00:00", "state": 4, "SKU" : 1478342961, "url": "Http://yushou.jd.com/qianggou.action?sku=1478342961&key= e9d318dd32984052fd440c6b23472597 "," info ":" Snapping in Progress "}

There is no mistake, the URL: The inside Out of the key value we want, in fact, this is the URL we want to get the submit address.

All smooth solution!

Thanks, ccav!.

"Web source of hidden" and JS debugging