Jak skopiować kod ze stron internetowych za pomocą Chrome, Firefox i Edge

Tworzenie strony internetowej od podstaw może sprawić, że będziesz drapać się po głowie, w zależności od złożoności projektu. Opanowanie tej czasochłonnej umiejętności może zająć miesiące lub lata. W rezultacie większość profesjonalnych programistów opracowała procesy i skróty, aby udoskonalić swoje umiejętności.

Obejmuje to prowadzenie wygodnej listy najpopularniejszych i powtarzalnych kodów programistycznych. W tym artykule poznasz kolejną sztuczkę, która pozwala odpowiedzialnie kopiować kod witryny za pomocą popularnych przeglądarek, takich jak Chrome, Firefox i Edge. Może być nieocenionym zasobem edukacyjnym, oferującym przykłady ukończonego kodu.

Jak skopiować kod ze stron internetowych za pomocą Chrome

Możesz skopiować kod ze strony internetowej, korzystając z poniższych metod w Chrome.

Przez źródło strony

Jest to prawdopodobnie najlepszy i najłatwiejszy sposób na uzyskanie dostępu do całej bazy kodu witryny lub strony internetowej, niezależnie od przeglądarki. Aby wyświetlić źródło strony w przeglądarce Chrome, przejdź do witryny docelowej i kliknij prawym przyciskiem myszy dowolną część strony inną niż linki, obrazy lub reklamy.

Kliknij Zobacz stronę źródłową lub po prostu naciśnij Ctrl + U (Windows, Linux) lub Komenda + U (System operacyjny Mac). Skopiuj żądany fragment kodu lub całość i wklej go do preferowanego edytora kodu.

Za pomocą skrótu F12

Możesz łatwo uzyskać dostęp do Narzędzi dla programistów Chrome, przechodząc do strony internetowej i po prostu naciskając F12. Chrome Developer Tools przechowuje kod strony internetowej i służy również jako narzędzie do debugowania dla programistów.

Zaznacz cały potrzebny kod, skopiuj go i wklej do wybranego edytora kodu.

Innym sposobem wejścia do panelu Chrome Developer Tools jest użycie narzędzia Inspect. W tym celu odwiedź stronę docelową, z której chcesz skopiować kod. Teraz naciśnij Ctrl + Shift + I (Windows, Linux) lub Polecenie + Opcja + I (macOS), przeniesie Cię to bezpośrednio do Dev Tools.

Alternatywnie kliknij prawym przyciskiem myszy dowolną pustą część strony i wybierz Sprawdzać z opcji menu, tuż pod opcją wyświetlenia źródła strony.

Poprzez menu Więcej akcji Chrome

Innym sposobem przeglądania kodu witryny za pomocą narzędzi programistycznych w przeglądarce Chrome jest kliknięcie przycisku z trzema kropkami w prawym górnym rogu docelowej witryny. Z opcji menu wybierz Więcej narzędzi, Następnie Narzędzia deweloperskie.

Skopiuj cały kod, który chcesz i wklej do dowolnego wybranego edytora kodu. Ponadto, oprócz tego, że jest narzędziem do debugowania, możesz także użyj Chrome Dev Tools do robienia zrzutów ekranu.

Jak skopiować kod ze stron internetowych za pomocą przeglądarki Firefox

Oto różne sposoby kopiowania kodu witryny za pomocą przeglądarki Firefox.

Zobacz stronę źródłową

Aby uzyskać dostęp i skopiować kod witryny w przeglądarce Firefox, wyświetlając źródło strony, po prostu kliknij prawym przyciskiem myszy docelową witrynę i kliknij Zobacz stronę źródłową.

Alternatywnie naciśnij Ctrl + U (Windows, Linux) lub Komenda + U (System operacyjny Mac). Skopiuj cały potrzebny kod i wklej go do wybranego edytora kodu.

Możesz równie łatwo wyświetlić źródło strony w Firefoksie, klikając trzywierszowe menu hamburgera, wybierając Więcej narzędzii klikając Źródło strony.

Za pomocą skrótu klawiaturowego F12

Podobnie jak Chrome, możesz również uzyskać dostęp do kodu strony internetowej w Firefox Dev Tools, po prostu naciskając klawisz F12 na klawiaturze.

Rozejrzyj się za konkretnym kodem, którego szukasz, zwracając szczególną uwagę na Edytor stylów. Teraz skopiuj i wklej cały ten kod do swojego ulubionego edytora kodu i pracuj nad magią.

Ponownie, podobnie jak Chrome, możesz w równym stopniu uzyskać dostęp do kodu witryny w Firefoksie za pomocą wbudowanego narzędzia Inspect. Aby to zrobić, kliknij prawym przyciskiem myszy dowolną wyczyszczoną część witryny docelowej i naciśnij Q lub kliknij Sprawdzać. Możesz także nacisnąć Ctrl + Shift + I (Windows, Linux) lub Polecenie + Opcja + I (System operacyjny Mac).

Jak wyjaśniono, nadal możesz używać Edytora stylów, aby znaleźć drogę, dopóki nie znajdziesz szukanego kodu. Następnie skopiuj i wklej go do dowolnego z nich najlepsze edytory kodu, jakie możesz znaleźć.

Za pomocą menu Więcej akcji w Firefoksie

Aby skopiować kod strony internetowej w Firefoksie za pomocą menu więcej akcji, ze strony internetowej, której kod chcesz skopiować, kliknij trzywierszowe menu hamburgera w prawym górnym rogu.

Wybierać Więcej narzędzi, następnie kliknij Narzędzia dla programistów internetowych. Stąd możesz użyć Inspektora lub Edytora stylów, aby skopiować żądany kod.

W przypadku Inspektora użyj klawiszy strzałek na klawiaturze lub paska przewijania, aby poruszać się po wpisach. W Edytorze stylów możesz skoncentrować się na określonych elementach zamówienia, korzystając z lewego panelu nawigacyjnego. Gdy znajdziesz to, czego szukasz, wklej skopiowany kod do edytora kodu i dostosuj go do swoich upodobań.

Jak skopiować kod ze stron internetowych za pomocą Edge

Możesz łatwo skopiować kod strony internetowej na różne sposoby za pomocą Edge w następujący sposób.

Zobacz stronę źródłową

Aby skopiować kod witryny internetowej, wyświetlając źródło strony w Microsoft Edge, po prostu kliknij prawym przyciskiem myszy dowolną pustą część witryny docelowej i wybierz Zobacz stronę źródłową.

Alternatywnie możesz po prostu nacisnąć Ctrl + U (Windows, Linux) lub Komenda + U (macOS), skopiuj żądaną część, wklej ją do edytora i zacznij dostosowywać kod.

Za pomocą skrótu klawiaturowego F12

Jeśli korzystasz z Edge, możesz równie dobrze skopiować kod strony internetowej, po prostu naciskając klawisz F12 podczas odwiedzania strony internetowej, z której chcesz skopiować kod.

Potwierdź swój wybór klikając Otwórz narzędzia deweloperskie. W panelu Dev Tools możesz łatwo skopiować cały potrzebny kod i przyspieszyć swoją pracę.

Aby skopiować kod strony internetowej za pomocą narzędzia Edge Inspect, przejdź do strony internetowej, której kod chcesz skopiować, kliknij prawym przyciskiem myszy dowolną wyczyszczoną część i wybierz Sprawdzać.

Możesz także nacisnąć Ctrl + Shift + I (Windows, Linux) lub Polecenie + Opcja + I (System operacyjny Mac). Następnie możesz skopiować i wkleić kod, który chcesz powielić i edytować.

Przycisk Więcej akcji w Edge

Edge umożliwia również dostęp do panelu DevTools za pośrednictwem menu więcej akcji. W tym celu wejdź na stronę, której kod chcesz skopiować. Kliknij przycisk z trzema kropkami w prawym górnym rogu i kliknij Więcej narzędzi, Następnie Narzędzia deweloperskie.

Jeśli Twoja przeglądarka nie ma którejś z tych opcji lub funkcji, możesz sprawdzić, czy jest aktualna. Oto jak sprawdzić i zaktualizować Chrome, Firefox i Edge.

Bez względu na to, jakie podejście wybierzesz i jakiej przeglądarki opartej na Chromium używasz (Chrome, Firefox lub Edge), ty może wyszukać określone pliki lub elementy, klikając menu z trzema kropkami w panelu Dev Tools i wybierając Szukaj. Alternatywnie, po prostu naciśnij Ctrl + Shift + F (Windows, Linux) lub Command + Opcja + F (System operacyjny Mac).

The Otwórz plik I Uruchom polecenie Opcje są również pomocne przy znajdowaniu kodu na stronie internetowej, podobnie jak Edytor stylów w Firefoksie i Elementy w panelu narzędzi deweloperskich Chrome i Edge.

Udoskonal swoje umiejętności, korzystając z istniejącego kodu witryny

Niezależnie od tego, czy korzystasz z Chrome, Firefox, Edge, czy innych przeglądarek internetowych opartych na Chromium (jeśli o to chodzi), możesz zaoszczędzić mnóstwo czasu i energii, po prostu kopiując kod z już istniejących witryn.

Jednak kopiowanie kodu witryny powinno odbywać się wyłącznie w celu własnej nauki i przeglądania offline. Próba stworzenia repliki istniejącej witryny internetowej i opublikowania jej w obecnej postaci może prowadzić do naruszenia praw autorskich. Możesz także zabrać swoje kodowanie w podróż dzięki mobilnym edytorom kodu.