除錯JS獲得動態視訊地址

需求

爬取一個H5視訊的url，但是這個url只在點選播放時動態建立。

可以看到點選後才出現src屬性

一開始使用selenium自動點選後獲取src，後來隨著IP被封鎖，使用代理要載入全部頁面的話非常慢，所以需要手動除錯看看點選之後到底發生了啥。

一、找到是哪個元素響應了點選事件

利用Chrome的開發者工具可以看到與點選事件有關的dom有這些：

可以用Chrome瀏覽器提供的功能，在元素上 右鍵 --> DeleteElement 將這個dom刪除，再次點選原來的位置看是否還有對應的響應事件。最後定位到響應事件的是 id="html5Player" 這個div。

二、檢視這個元素繫結的點選事件

元素繫結事件常用的有jQuery的繫結和js原生的dom操作，可以通過搜尋一些特徵程式碼來定位。在console的工具欄左側點選新增Search皮膚。首先搜尋$('#html5Player')和$("#html5Player")看看是不是使用了jQuery。

結果沒有，只有一些css操作。看來是原生js操作了，接著搜尋getElementById("html5Player")。

看到第211行有一個賦值語句，點過去看一下。

繼續往下翻可以看到新增click事件的程式碼：

三、除錯js程式碼

點進這個語句，在控制檯檢視語句所在的js檔案並在該js檔案中搜尋removeStartPlayBtn 方法。

這裡有一個設定播放器src的程式碼，現在只需要chapterVos 變數的內容就知道src了，繼續在js檔案中搜尋chapterVos 尋找蛛絲馬跡。

果然，找到了chapterVos的賦值語句，現在的問題是obj的值是什麼。沿著這個函式向上尋找，找到obj的賦值語句。

可以看到obj是js內建函式eval的執行結果。

eval() 函式可計算某個字串，並執行其中的的 JavaScript 程式碼。

其中data就是外層函式getHtml5VideoData引數，現在只需要檢視這個函式在哪裡被呼叫就可以知道引數是什麼。

全域性搜尋getHtml5VideoData字串，發現只有兩處使用了這個函式：

第一個是剛才看到的函式定義，第二個是一個請求getIpadVideoInfo.do的返回資料。（後來經過分析這個是js動態建立<script>標籤時，將標籤的src屬性設定為這個url，相當於返回一段js程式碼並執行）Chrome全域性搜尋是真厲害。在Network皮膚中找到這個url，可以看到返回值大概是這樣：

var html5VideoData = '{}';
getHtml5VideoData(html5VideoData);
複製程式碼

問題到這裡就差不多解決了，通過分析函式對這個json物件的處理，就可以知道視訊src是什麼了。

四、結語

通過除錯分析js程式碼使得原來要載入整個頁面包括圖片等待變成只需要請求一個url，大部分的免費代理都可以做到了。但是這麼容易除錯出來主要是js程式碼沒有做混淆處理，不然到第三步就GG了。。。