logo
Loading...

請問網頁開發工具裡面的Elements和Network顯示出來的程式碼有何不同呢? - Cupoy

請問網頁開發工具裡面的Elements和Network顯示出來的程式碼有何不同呢?如下兩張圖 為何我...

請問網頁開發工具裡面的Elements和Network顯示出來的程式碼有何不同呢?

2019/12/27 下午 05:04
Python網路爬蟲討論版
Emma
觀看數:3
回答數:2
收藏數:0

請問網頁開發工具裡面的Elements和Network顯示出來的程式碼有何不同呢?

如下兩張圖 為何我在Elements可以找到想要的標籤和放映地區內容 在Network的response就找不到呢?

在Elements中:

在Network中:


回答列表

  • 2019/12/27 下午 05:11
    張維元 (WeiYuan)
    贊同數:2
    不贊同數:0
    留言數:1

    嗨, Network 是指 HTTP 拉回來的資料,Element 是畫面上真正顯示資訊。這個時候你可以想,為什麼拉回來的資料跟真正顯示資訊有落差呢?


    答案是在拉回來之後到畫面顯示之前,其實 瀏覽器 默默進行了一些加工的動作。簡單來說,瀏覽器會執行 JavaScript 載入更多資料篩回畫面上,也就是我們所謂的動態行為。為了驗證這個猜想是正確的,你可以先把瀏覽器的 JavaScript 關掉,就會發現兩者變成一致。至於怎麼解決這個問題,我們到後面的動態網頁爬蟲會詳細討論:)

  • 2019/12/27 下午 05:48
    張維元 (WeiYuan)
    贊同數:2
    不贊同數:0
    留言數:1

    那請問 指定一個電影id查詢放映地點 程式碼當中的: url = 'https://movies.yahoo.com.tw/api/v1/areas_by_movie_theater' 也是執行javascipt來的嗎? 因為我在網頁中選了電影 兔嘲男孩,( ID: 10283)網頁url並沒有變化啊? 這樣我要如何得知url?  還有如何知道要在get時加上params=payload這串資料?


    => 看起來是的,這種透過 JavaScript 動態載入的行為,可以利用 Network 來觀察,觀察發出了哪些 API 拉回更多資料。params 後面的資料跟直接加在網址上的 ?a=1&b=2 用法是一樣的。