捕獲html 5/css 3頁面狀態的工具，以便視覺設計師可以進行更改

與Web UI一起工作的新手。我們有一個複雜的設置，它需要代碼並生成帶有一堆javascript的HTML 5和CSS 3。我需要能夠在通過幾個工作流程（啓動了一堆我不明白的javascript DOM更改）之後捕獲得到的HTML/CSS，以便我可以與我的設計人員一起調整佈局並回饋給開發者去改變。捕獲html 5/css 3頁面狀態的工具，以便視覺設計師可以進行更改

有沒有辦法做到這一點？我能夠從螢火蟲複製HTML，但它仍然引用服務器上的CSS，並且沒有簡單的方法來下載CSS並更新HTML以指向它們本地。

謝謝！

來源

2013-04-29 TonyH

當您使用Firefox或Chrome將複製的HTML粘貼到框中時，以下頁面將創建一個下載鏈接。

<html> 

<b>Select All, Copy, and paste below to download the full copied HTML</b> 

<div id=drop contentEditable 
    style="padding: 1em; height: 30em; background:#bbb;overflow:hidden; "> 
</div> 

<a id=out download=copied.html style=display:none> Download </a> 

<script> 

var out=document.getElementById("out"), 
    drop=document.getElementById("drop"); 


drop.onpaste=function doPaste(){ 
    setTimeout(function(){ 
     out.href="data:x-application/html,"+ 
      escape(drop.innerHTML); 
     drop.style.display="none"; 
     out.style.display="block"; 
    }, 50); 
}; 

</script> 
</html>

與您的網站使用，

做的東西，使網頁的變化，然後單擊頁面背景的空白區域和按[Ctrl] + [A]（WIN）或[ CMD] + [A]（MAC）
拷貝使用右擊或鍵盤
粘貼到上述
點擊「下載」所示下載最終的HTML文件的文件中的框。

因爲它是一個小文件，我繼續向a copy online投擲，所以你可以嘗試一下;對於這個頁面非常有效。

注意風格的信息被轉換成風格attribs，所以你並不需要的CSS文件，但在同一時間，你沒有應用的樣式，其中一些設計師可能想要的文件名...

來源

2013-04-30 00:25:58 dandavis

捕獲html 5/css 3頁面狀態的工具，以便視覺設計師可以進行更改

回答

相關問題