Narzędzia do selektywnego kopiowania HTML + CSS + JS z istniejących witryn [zamknięte]
Jak większość programistów, czasami lubię patrzeć na źródło stron internetowych, aby zobaczyć, jak ich znaczniki są zbudowane. Narzędzia takie jak Firebug i Chrome Developer Tools ułatwiają wgląd w kod, ale jeśli chcę skopiować izolowaną sekcję i pobawić się nią lokalnie, kopiowanie wszystkich poszczególnych elementów i powiązanych z nimi css byłoby uciążliwe. I prawdopodobnie tyle samo pracy, aby zapisać całe źródło i wyciąć niezwiązany kod.
Byłoby wspaniale gdybym mógł kliknij prawym przyciskiem myszy węzeł w Firebug i wybierz opcję "Zapisz HTML + CSS dla tego węzła". Czy takie narzędzie istnieje? Czy można rozszerzyć narzędzia programistyczne Firebug lub Chrome, aby dodać tę funkcję?
16 answers
SnappySnippet
W końcu znalazłem trochę czasu, aby stworzyć to narzędzie. Możesz zainstalować SnappySnippet ze sklepu Chrome Web Store. Pozwala na łatwe wyodrębnianie HTML+CSS z określonego (ostatnio sprawdzonego) węzła DOM. Dodatkowo możesz wysłać swój kod bezpośrednio do CodePen lub JSFiddle. Smacznego!
Inne funkcje
- czyści HTML (usuwa niepotrzebne atrybuty, naprawia wcięcia)
- optymalizuje CSS, aby go czytelne
- w pełni konfigurowalny (wszystkie filtry można wyłączyć)
- Działa z
::beforei::afterpseudoelementami - ładny interfejs dzięki Bootstrap & projekty Flat-UI
Kod
SnappySnippet jest open source, a kod znajdziesz na Githubie .
Realizacja
Ponieważ nauczyłem się sporo podczas tworzenia tego, postanowiłem podzielić się niektórymi problemami, których doświadczyłem i moimi rozwiązaniami może komuś się spodoba.
Pierwsza próba-getMatchedCSSRules ()
Na początku próbowałem pobrać oryginalne reguły CSS(pochodzące z plików CSS na stronie). Co ciekawe, jest to bardzo proste dzięki window.getMatchedCSSRules(), jednak nie wyszło dobrze. Problem polegał na tym, że braliśmy tylko część selektorów HTML i CSS, które pasowały w kontekście całego dokumentu, które nie pasowały już w kontekście fragmentu HTML. Od parsowanie i modyfikowanie selektorów nie wydawało się dobrym pomysłem, zrezygnowałem z tej próby.
Druga próba-getComputedStyle ()
Potem zacząłem od czegoś, co zasugerował @CollectiveCognition- getComputedStyle(). Jednak naprawdę chciałem oddzielić CSS od HTML zamiast inlining wszystkich stylów.
Problem 1-oddzielenie CSS od HTML
Rozwiązanie tutaj nie było zbyt piękne, ale dość proste. Przypisałem identyfikatory do wszystkich węzłów w wybranym poddrzewie i użył tego ID do stworzenia odpowiednich reguł CSS.
Problem 2-Usunięcie właściwości z wartościami domyślnymi
Przypisywanie identyfikatorów do węzłów poszło dobrze, jednak dowiedziałem się, że każda z moich reguł CSS ma ~300 właściwości, dzięki czemu cały CSS jest nieczytelny.
Okazuje się, że getComputedStyle() zwraca wszystkie możliwe właściwości i wartości CSS obliczone dla danego elementu. Niektóre z nich były puste, niektóre miały domyślne wartości przeglądarki. Aby usunąć wartości domyślne musiałem je pobrać z najpierw przeglądarka (a każdy znacznik ma inne wartości domyślne). Rozwiązaniem było porównanie stylów elementu pochodzącego ze strony internetowej z tym samym elementem wstawionym do pustego <iframe>. Logika polegała na tym, że nie ma arkuszy stylów w pustym <iframe>, więc każdy element, który tam dodałem, miał tylko domyślne style przeglądarki. W ten sposób udało mi się pozbyć większości nieistotnych właściwości.
Problem 3-zachowanie tylko właściwości stenograficznych
Następna rzecz jaką mam zauważono, że właściwości mające odpowiedniki stenograficzne były niepotrzebnie drukowane (np. było border: solid black 1px i wtedy border-color: black;, border-width: 1px itd.).
Aby rozwiązać ten problem, po prostu stworzyłem listę właściwości, które mają skrócone odpowiedniki i odfiltrowałem je z wyników.
Problem 4-Usuwanie właściwości prefiksowych
Liczba właściwości w każdej zasadzie była znacznie niższa po poprzedniej operacji, ale odkryłem, że mam wiele -webkit- prefiksów właściwości że nigdy nie słyszałem (-webkit-app-region? -webkit-text-emphasis-position?).
Zastanawiałem się, czy nie powinienem zachować żadnej z tych właściwości, ponieważ niektóre z nich wydawały się przydatne (-webkit-transform-origin, -webkit-perspective-origin itd.). Nie wymyśliłem jednak, jak to zweryfikować, a ponieważ wiedziałem, że przez większość czasu te właściwości są tylko śmieciami, postanowiłem je wszystkie usunąć.
Problem 5-łączenie tych samych reguł CSS
Kolejnym problemem, który zauważyłem było to, że te same reguły CSS są powtarzane w kółko (np. dla każdego <li> z dokładnie te same style była ta sama reguła w utworzonym wyjściu CSS).
To była tylko kwestia porównywania ze sobą reguł i łączenia tych, które miały dokładnie ten sam zestaw właściwości i wartości. W rezultacie zamiast #LI_1{...}, #LI_2{...} dostałem #LI_1, #LI_2 {...}.
Problem 6-czyszczenie i naprawianie wcięć HTML
Ponieważ byłem zadowolony z wyniku, przeniosłem się do HTML. Wyglądało to na bałagan, głównie dlatego, że właściwość outerHTML zachowuje formatowanie dokładnie tak, jak została zwrócona z serwer.
Jedyną rzeczą, której kod HTML zaczerpnięty z outerHTML potrzebował, było proste formatowanie kodu. Ponieważ jest to coś dostępnego w każdym IDE, byłem pewien, że istnieje biblioteka JavaScript, która dokładnie to robi. I okazuje się, że miałem rację (jQuery-clean). Co więcej, mam zbędne atrybuty usuwania extra (style, data-ng-repeat itd.).
Problem 7-filtry Å‚amiÄ…ce CSS
Ponieważ istnieje szansa, że w pewnych okolicznościach wymienione powyżej filtry mogą złamać CSS w fragmencie, zrobiłem wszystkie z nich opcjonalne. Możesz je wyłączyć z menu Settings .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-03 08:07:40
Przeglądarki Webkit (nie są pewne co do FireBug) pozwalają na łatwe kopiowanie HTML elementu, więc jest to jedna z części procesu z drogi.
Uruchomienie tego (w konsoli javascript) przed skopiowaniem HTML dla elementu spowoduje przeniesienie wszystkich obliczonych stylów dla danego elementu nadrzędnego, jak również wszystkich elementów potomnych, do wbudowanego atrybutu stylu, który będzie dostępny jako część HTML.
var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");
for(var i = -1, l = els.length; ++i < l;){
els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);
}
To totalny hack i będziesz miał wiele "śmieci" atrybutów css przebrnąć przez to, ale przynajmniej powinieneś zacząć.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-07 18:59:09
Początkowo zadałem to pytanie szukałem rozwiązania Chrome (lub FireFox), ale natknąłem się na tę funkcję w narzędziach programistycznych Internet Explorer. Prawie to ,czego szukam (poza javascript)
Wynik:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-02 18:28:50
Stworzyłem to narzędzie lata temu w tym samym celu:
http://www.betterprogramming.com/htmlclipper.html
Możesz go używać i ulepszać.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-12 15:16:49
Można to zrobić za pomocą wtyczki Firebug o nazwie scrapbook
Możesz zaznaczyć opcję Javascript w ustawieniu
Edit:
To może również pomóc
Firequark jest rozszerzeniem Firebug aby wspomóc proces tworzenia ekranu HTML Skrobanie. Firequark wyodrębnia selektor css dla pojedynczego lub wiele węzłów html ze strony internetowej korzystanie z Firebug (tworzenie stron www wtyczka dla Firefoksa). Css selektor wygenerowane mogą być podane jako dane wejściowe do html screen scrapers jak Scrapi do wyciągnij informacje. Firequark jest stworzony, aby uwolnić moc css selektor do korzystania z ekranu html skrobanie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-27 11:45:42
Divclip jest aktualizowany wersja Florentina Sardana htmlclipper
Z nowoczesnymi ulepszeniami: ES5, HTML5, scoped CSS...
Możesz programowo wyodrębnić stylizowany div za pomocą:
var html = require("divclip").bySel(".article-body");
console.log(html);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:17
Nie są potrzebne żadne wtyczki. Można to zrobić bardzo prosto z Internet Explorer 11 natywne narzędzia programistyczne za pomocą jednego kliknięcia, bardzo czyste. Wystarczy na elemencie i sprawdzić ten element, a następnie kliknij prawym przyciskiem myszy na jakimś bloku i wybierz "Kopiuj element ze stylami". Możesz to zobaczyć na poniższym obrazku.
Zapewnia kod css bardzo czysty, jak
.menu {
margin: 0;
}
.menu li {
list-style: none;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-06 13:50:16
Ostatnio stworzyłem rozszerzenie chrome "eXtract Snippet" do kopiowania sprawdzonego elementu, html i tylko odpowiednich zapytań css i mediów ze strony. Zauważ, że to da ci rzeczywisty odpowiedni CSS
Https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en{[4]
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-09 16:11:19
Narzędzie z jednym rozwiązaniem tego nie wiem, ale można używać Firebug i Rozszerzenie Web Developer w tym samym czasie.
Użyj Firebug, aby skopiować sekcję html, której potrzebujesz (Inspect Element) i Web Developer, aby zobaczyć, który css jest skojarzony z elementem (wywołanie Web Developer "View Style Information" - działa jak Firebug "Inspect Element", ale zamiast pokazywać znaczniki html, pokazuje skojarzony CSS z tym znacznikiem).
To nie jest dokładnie co chcesz (jedno kliknięcie na wszystko), ale jest dość blisko, a przynajmniej intuicyjne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-19 03:24:58
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-17 08:07:37
Potrzebuję również tej funkcji na Firebug! Do tego czasu innym podejściem jest użycie Tej usługi online do usuwania klas i konwersji css na style inline.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-27 07:38:22
Po prostu skopiuj żądaną część ze strony i wklej ją w edytorze wysiwyg. Sprawdź źródło html, klikając przycisk "Źródło" na pasku narzędzi edytora.
Znalazłem ten najprostszy sposób, gdy pracowałem na stronie Drupal. Używam wysiwyg CKeditor.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-29 07:03:57
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;
}
});
Użycie:
$("#login_wrapper").getStyles()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-07 06:38:12
Zaadaptowałem top voted answer jako dragabble bookmarklet.
Po prostu odwiedź tę stronę i przeciągnij przycisk" Uruchom Kod jQuery " na pasek zakładek.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:47
Istnieje wtyczka firefox , która zapisuje HTML, CSS, itp.. ale nie widziałem takiego, który częściowo uratuje.
Pamiętam, że IE 5.5 miało to czego szukałeś;)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-27 07:34:39
Przejrzałem wszystkie narzędzia wymienione jako odpowiedź tutaj. Ale dają powtarzany, brudny HTML CSS z piękną twarzą, na którą się gapisz. Nie dają Ci JS.
Co robiÄ™:
- najpierw filtruję reklamy, które nie są wymagane na stronie
- Następnie zapisz pełną stronę internetową wraz z linkami do zasobów.
- Usuń niepotrzebne HTML, CSS i JS [5]}ostrożnie odłączaj zasoby jeden po drugim.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-11 02:53:50