給定一個url，腳本如何找到加載的資源？

給定一個URL（例如localhost:8000），腳本如何找到瀏覽器加載的資源（通過HTTP請求）？給定一個url，腳本如何找到加載的資源？

例如，讓我們假設/路線與迴應：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Test</title> 
     <link rel="stylesheet" href="/css/style.css"> 
    </head> 
    <body> 
     some content 
     <img src="/foo.png" alt=""> 
    </body> 
</html>

將被加載的資源：

/css/style.css
foo.png

這是簡單（只是一個dom itera通過cheerio左右），但它並不是我認爲應該如此。

響應HTML中的迭代對於額外的CSS @import s和background-image等不起作用。

通過瀏覽器加載的CSS，圖片和其他資源獲取列表的本機方式是什麼？可能是jsdom？

來源

2015-03-08 Ionică Bizău

http://stackoverflow.com/questions/19786525/how-to-list-loaded-resources-with-selenium-phantomjs – adeneo 2015-03-08 18:29:50

@adeneo'webpage'似乎並沒有被使用......不過這是一個有趣的答案。仍然需要更多的信息.. – 2015-03-08 18:33:58

我想說的是，如果你打算包含像@imports和XMLHttpRequest等東西，你可能需要一個實際加載頁面的無頭瀏覽器來查看究竟加載了哪些資源。 – adeneo 2015-03-08 18:38:48

像@adeneo建議，缺少的關鍵字是無頭瀏覽器。我通過zombie library發現它非常簡單。下面你可以看到一個小例子，但是the documentation is a great resource。

// Dependencies 
var Browser = require("zombie"); 

// Load localhost:9000 
Browser.localhost("localhost", 9000); 

// Load the page from localhost, 
// including js, css, images and iframes 
var browser = new Browser({ 
    features: "scripts css img iframe" 
}); 

// Open the page and list the resources 
browser.visit("/", function(error) { 
    console.log(browser.resources.map(function (c) { 
     return c.request.url; 
    })); 
});

來源

2015-03-08 19:11:54

給定一個url，腳本如何找到加載的資源？

回答

相關問題