Как да копирате код от уебсайтове с помощта на Chrome, Firefox и Edge

Създаването на уебсайт от нулата може да ви накара да се почешете по главата в зависимост от сложността на проекта. Усвояването на това отнемащо време умение може да отнеме месеци или години. В резултат на това повечето професионални програмисти са разработили процеси и преки пътища за усъвършенстване на уменията си.

Това включва поддържане на удобен списък с най-популярния и повтарящ се програмен код. В тази статия ще научите още един трик, който ви позволява да копирате отговорно кода на уебсайта с помощта на популярни браузъри като Chrome, Firefox и Edge. Може да бъде безценен учебен ресурс, предлагащ примери за завършен код.

Как да копирате код от уебсайтове с помощта на Chrome

Можете да копирате код от уебсайт, като използвате следните методи в Chrome.

Чрез изходния код на страницата

Това е може би най-добрият и най-лесният начин за достъп до цялата кодова база на уебсайт или уеб страница, независимо от браузъра. За да видите изходния код на страницата в Chrome, отидете на целевия уебсайт и щракнете с десния бутон върху която и да е част от страницата, различна от връзки, изображения или реклами.

Кликнете Виж източника на страницата или просто натиснете Ctrl + U (Windows, Linux) или Command + U (macOS). Копирайте частта от кода, който искате, или целия и го поставете в предпочитания от вас редактор на код.

Чрез клавишната комбинация F12

Можете лесно да получите достъп до инструментите за разработчици на Chrome, като отидете на уебсайт и просто натиснете F12. Инструментите за разработчици на Chrome съдържат код на уебсайт и служат като инструмент за отстраняване на грешки за разработчици.

Изберете целия код, който искате, копирайте го и го поставете в редактор на код по ваш избор.

Друг начин за влизане в панела с инструменти за разработчици на Chrome е чрез инструмента за проверка. За да направите това, посетете целевия уебсайт, от който искате да копирате кода. Сега, натиснете Ctrl + Shift + I (Windows, Linux) или Command + Option + I (macOS), това ще ви отведе направо до Dev Tools.

Друга възможност е да щракнете с десния бутон върху която и да е чиста част от страницата и да изберете Инспектирайте от опциите на менюто, точно под опцията за преглед на изходния код на страницата.

Чрез менюто Още действия на Chrome

Друг начин за изследване на кода на уебсайта чрез Dev Tools в Chrome е да щракнете върху бутона с три точки в горния десен ъгъл на целевия уебсайт. От опциите на менюто изберете Още инструменти, тогава Инструменти за разработчици.

Копирайте целия код, който искате, и го поставете във всеки редактор на код по ваш избор. Също така, освен като инструмент за отстраняване на грешки, можете също използвайте Chrome Dev Tools, за да правите екранни снимки.

Как да копирате код от уебсайтове с помощта на Firefox

Ето различни начини за копиране на код на уебсайт с помощта на Firefox.

Виж източника на страницата

За достъп и копиране на кода на уебсайт във Firefox, като прегледате изходния код на страницата, просто щракнете с десния бутон върху целевия уебсайт и щракнете Виж източника на страницата.

Като алтернатива натиснете Ctrl + U (Windows, Linux) или Command + U (macOS). Копирайте целия код, който искате, и го поставете в избрания от вас редактор на код.

Можете също толкова лесно да видите изходния код на страницата във Firefox, като щракнете върху триредовото меню за хамбургер и изберете Още инструментии щракване Източник на страницата.

Чрез клавишната комбинация F12

Точно като Chrome, можете също да получите достъп до кода на уебсайт в Firefox Dev Tools, като просто натиснете клавиша F12 на клавиатурата.

Огледайте се за конкретния код, който търсите, като обърнете специално внимание на редактора на стилове. Сега копирайте и поставете целия този код в любимия си редактор на код и направете магията си.

Отново, подобно на Chrome, можете еднакво да получите достъп до кода на уебсайта във Firefox, като използвате вградения инструмент Inspect. За да направите това, щракнете с десния бутон върху която и да е чиста част от целевия уебсайт и натиснете Q или щракнете Инспектирайте. Можете също да натиснете Ctrl + Shift + I (Windows, Linux) или Command + Option + I (macOS).

Както беше обяснено, все още можете да използвате редактора на стилове, за да се ориентирате, докато не намерите кода, който търсите. След това го копирайте и поставете във всеки от най-добрите редактори на код, които можете да намерите.

Чрез менюто Още действия на Firefox

За да копирате кода на уебсайт във Firefox чрез менюто с още действия, от уебсайта, чийто код искате да копирате, щракнете върху менюто с три реда хамбургер в горния десен ъгъл.

Изберете Още инструменти, след това щракнете Инструменти за уеб разработчици. От тук можете да използвате или Inspector, или Style Editor, за да копирате желания код.

За Inspector използвайте клавишите със стрелки на клавиатурата или лентата за превъртане, за да навигирате в записите. За редактора на стилове можете да се съсредоточите върху конкретни договорени позиции, като използвате левия панел за навигация. Когато намерите това, което искате, поставете копирания код във вашия редактор на кодове и го персонализирайте по ваш вкус.

Как да копирате код от уебсайтове с помощта на Edge

Можете лесно да копирате кода на уебсайта по различни начини, като използвате Edge, както следва.

Виж източника на страницата

За да копирате кода на уебсайта, като прегледате изходния код на страницата в Microsoft Edge, просто щракнете с десния бутон върху която и да е чиста част от целевия сайт и изберете Виж източника на страницата.

Като алтернатива можете просто да натиснете Ctrl + U (Windows, Linux) или Command + U (macOS), копирайте частта, която искате, поставете я в редактор и започнете да персонализирате кода.

Чрез клавишната комбинация F12

Ако използвате Edge, можете също така да копирате кода на уебсайта, като просто натиснете клавиша F12, когато посетите уебсайта, от който искате да копирате кода.

Потвърдете избора си с щракване Отворете DevTools. В панела Dev Tools можете лесно да копирате целия код, който искате, и да направите работата си по-бърза.

За да копирате кода на уебсайт с помощта на инструмента Inspect на Edge, отидете на уебсайта, чийто код искате да копирате, щракнете с десния бутон върху произволна ясна част и изберете Инспектирайте.

Можете също да натиснете Ctrl + Shift + I (Windows, Linux) или Command + Option + I (macOS). След това можете да копирате и поставите кода, който искате да дублирате и редактирате.

Чрез бутона за още действия на Edge

Edge също ви позволява да получите достъп до неговия панел DevTools чрез менюто с още действия. За да направите това, отидете на уебсайта, чийто код искате да копирате. Щракнете върху бутона с три точки в горния десен ъгъл и щракнете Още инструменти, тогава Инструменти за разработчици.

Ако в браузъра ви липсва някоя от тези опции или функции, добре е да проверите дали е актуален. Ето го как да проверявате и актуализирате Chrome, Firefox и Edge.

Какъвто и подход да предприемете и какъвто и базиран на Chromium браузър да използвате (Chrome, Firefox или Edge), вие може да търси конкретни файлове или елементи, като щракнете върху менюто с три точки на панела Dev Tools и избиране Търсене. Като алтернатива просто натиснете Ctrl + Shift + F (Windows, Linux) или Command + Option + F (macOS).

The Отворете файла и Изпълни команда опциите също са полезни за намиране на код на уебсайт, колкото и Редактор на стилове във Firefox и Елементи в панела с инструменти за разработка на Chrome и Edge.

Усъвършенствайте уменията си, като използвате съществуващ код на уебсайт

Независимо дали използвате Chrome, Firefox, Edge или други уеб браузъри, базирани на Chromium (по този въпрос), можете да спестите много време и енергия, като просто копирате код от вече съществуващи уебсайтове.

Въпреки това, копирането на кода на уебсайта трябва да се прави само за вашето собствено обучение и ровене офлайн. Опитът за създаване на копие на съществуващ уебсайт и публикуването му такъв, какъвто е, може да доведе до нарушаване на авторски права. Можете също така да използвате кодирането си в движение с мобилни редактори на кодове.