像大多数web开发人员一样，我偶尔喜欢查看网站的源代码，看看它们的标记是如何构建的。像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码，但是如果我想复制一个特定的部分并在本地使用它，复制所有单独的元素和它们相关的CSS将是一件痛苦的事情。保存整个源代码并删除不相关的代码可能需要做同样多的工作。
这将是伟大的，如果我可以在Firebug中右键单击一个元素，并有一个“保存HTML+CSS+JS为这个元素”选项。这样的工具存在吗?是否有可能扩展Firebug或Chrome开发工具来添加此功能?
当前回答
我已经改编了投票最多的答案作为一个可拖动的书签。
只需访问此页面并拖动“运行jQuery代码”按钮到书签栏。
其他回答
最近，我创建了一个chrome扩展“eXtract Snippet”用于复制检查的元素，html和相关的css和媒体查询从一个页面。注意，这将为您提供实际的相关CSS
https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en
jQuery.fn.extend({
getStyles: function() {
var rulesUsed = [];
var sheets = document.styleSheets;
for (var c = 0; c < sheets.length; c++) {
var rules = sheets[c].rules || sheets[c].cssRules;
for (var r = 0; r < rules.length; r++) {
var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
if (this.is(selectorText) || this.find(selectorText).length > 0) {
rulesUsed.push(rules[r]);
}
}
}
var style = rulesUsed.map(function(cssRule) {
return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
}).join("\n");
return style;
}
});
用法:$ (" # login_wrapper ") .getStyles ()
只需从网页复制你想要的部分，并将其粘贴在所见即所得编辑器中。点击编辑器工具栏上的“source”按钮，检查html源代码。
当我在Drupal网站上工作时，我发现了这个最简单的方法。我使用wysiwyg CKeditor。
我不知道这是一个具有单一解决方案的工具，但您可以同时使用Firebug和Web Developer扩展。
使用Firebug复制你需要的html部分(Inspect Element)和Web Developer查看哪个css与某个元素相关联(调用Web Developer“查看样式信息”-它的工作方式类似于Firebug的“Inspect Element”，但它显示的不是html标记而是与该标记相关联的css)。
这并不是你想要的(点击所有内容)，但它非常接近，至少是直观的。
Divclip是一个更新 Florentin Sardan的版本 htmlclipper
与现代增强:ES5, HTML5，范围CSS…
你可以用下面的方法提取一个程式化的div:
var html = require("divclip").bySel(".article-body");
console.log(html);
享受。
