Home-theater-designers
Chrome DevTools е основен актив за разработчиците. Докато други браузъри предлагат доста удобни инструменти за отстраняване на неизправности, Chrome DevTools заслужава вашето внимание поради своя многофункционален интерфейс и популярност.
Chrome е най -популярният браузър за разработчици поради мощния си набор от инструменти за отстраняване на грешки. Използването на Chrome DevTools е лесно, но трябва да разберете как работи, за да извлечете максимума от него.
Как работят инструментите за програмисти на Chrome
Chrome DevTools ви позволява да решавате проблеми на уебсайт чрез неговата конзола за грешки и други инструменти за отстраняване на грешки и мониторинг. Използването на DevTools разкрива вратичките в интерфейса и ви позволява да наблюдавате как вашият уебсайт изглежда на мобилни и таблетни устройства.
С DevTools можете да извършвате редакции в реално време в кода на уебсайт, като JavaScript, HTML и CSS, и да получавате незабавни резултати от промените си.
Промените, които правите чрез DevTools, не засягат трайно уебсайта. Те само временно показват очаквания резултат, сякаш сте ги приложили към действителния изходен код. Това ви позволява да разработите начини да заредите уебсайта си много по -бързо и улеснява изглаждането на грешки.
Как да получите достъп до Chrome DevTools
Можете да получите достъп до Chrome DevTools по няколко начина. За да отворите инструментите за програмисти с метода за бърз достъп в Mac OS, натиснете Cmd + Opt + I . Ако използвате операционната система Windows, натиснете бутона Ctrl + Shift + I клавишите на клавиатурата.
Като алтернатива можете да получите достъп до инструментите за програмисти на Chrome, като кликнете върху трите точки в горния десен ъгъл на екрана. Насочете се към Още инструменти и изберете Инструменти за разработчици . Друга възможност е да щракнете с десния бутон върху уеб страницата и да кликнете върху Проверете опция.
Използване на инструментите за разработчици на Chrome за диагностика на уебсайтове
Chrome DevTools предлагат няколко начина за ощипване и отстраняване на проблеми с уеб страница. Нека да разгледаме някои от начините, по които DevTools може да ви помогне.
Вижте как изглежда вашият уебсайт на смартфон
След като превключите браузъра си Chrome в режим за програмисти, той изобразява половин размер версия на вашата уеб страница. Това обаче няма да ви даде реална представа как би изглеждало на смартфон или таблет.
За щастие, освен че задава размера на екрана на уеб страница, Chrome DevTools ви позволява да превключвате и между различни типове и версии на мобилни екрани.
За достъп до тази опция включете Проверете режим. След това кликнете върху Отзивчив падащото меню в горния ляв ъгъл на DevTools и изберете предпочитаното от вас мобилно устройство. След това уеб страницата се изобразява и регулира според размера на мобилното устройство, което сте избрали.
как да промените иконата на файл
Достъп до изходните файлове на уеб страница
Можете да получите достъп до файловете, които съставляват уеб страница чрез Chrome DevTools. За достъп до тези файлове щракнете върху Източници опция в горната част на менюто DevTools. Това разкрива файловата система на уебсайта и също така ви дава възможност за редактиране.
Можете също да търсите изходни файлове, което може да бъде полезно, когато имате работа с уеб страница, която има много ресурси. За да потърсите изходен файл чрез DevTools, щракнете върху Търсене опция точно над конзолата.
Ако обаче не можете да намерите Търсене вариант, по -добра алтернатива е да използвате клавишни комбинации. В Mac OS натиснете Cmd + Opt + F клавиши за търсене на изходен файл. Ако използвате операционна система Windows, натиснете Ctrl + Shift + F ключ за достъп до лентата за търсене на изходния файл.
Извършете редактиране на живо на уеб страница
Една от основните цели на използването на DevTools е да се извърши незабавно фалшиво редактиране на елементите на уеб страница . След като преминете към инструментите за програмисти, можете да редактирате HTML съдържанието на уебсайт, като щракнете върху Елементи опция. След това щракнете с десния бутон върху всяка точка, към която искате да приложите промени, в редактора на кодове и изберете Редактирайте като HTML .
За да редактирате CSS свойства, които не са вградени, изберете Източници . След това изберете CSS файла, който искате да редактирате. Поставете курсора върху избрания от вас ред в конзолата на кода, за да извършите редакция на живо. Това ви дава незабавна обратна връзка за всички промени в стила, които прилагате към уеб страницата.
Обърнете внимание, че когато редактирате страница чрез DevTools, презареждането на страницата във вашия браузър я връща към първоначалната й форма и редактирането е видимо само за вас. Редактирането чрез DevTools нито засяга гладкото функциониране, нито използването на този уебсайт за други потребители.
Отстраняване на грешки в JavaScript кода с конзолата DevTools
Един от най -добрите начини за отстраняване на грешки в JavaScript е използването на инструментите за програмисти на Chrome. Той ви дава директен отчет за невалидни скриптове, както и точното местоположение на грешката.
Добра практика е винаги да държите DevTools отворени, докато проектирате уебсайт с JavaScript. Например, изпълнението на console.log () команда JavaScript на набор от инструкции показва резултата от този дневник в конзолата на DevTools, ако програмата работи успешно.
По подразбиране конзолата отчита всички проблеми с JavaScript на вашия уебсайт. Можете да намерите конзолата в долната част на DevTools или да получите достъп до нея, като щракнете върху Конзола опция в горната част на прозореца на DevTools на Chrome.
Наблюдавайте зареждането на ресурси от база данни
В допълнение към отстраняването на грешки в JavaScript, конзолата може да ви даде и подробности за ресурсите, които не се зареждат правилно от базата данни на уебсайта.
Въпреки че това не винаги е най -добрият начин за отстраняване на грешки при проблеми с бекенда, той все пак ви казва кои ресурси връщат a 404 грешка след стартиране на заявка към база данни на тези елементи.
Свързани: Чести грешки в уебсайта и какво означават те
Превключете ориентацията на инструментите за програмисти на Chrome
За да промените позицията на инструментите за разработчици на Chrome, щракнете върху трите точки от менюто в DevTools (не основната в браузъра). След това изберете предпочитаната позиция от Док страна опция.
Инсталирайте разширенията за Chrome DevTools
Можете също да инсталирате конкретни езикови или рамкови разширения, които работят с Chrome DevTools. Инсталирането на тези разширения ви позволява по -ефективно отстраняване на грешки в уеб страницата ви.
Можете да получите достъп до списък с наличните разширения за Chrome DevTools в Chrome Представени разширения на DevTools галерия.
Проверете за проблеми със сигурността на уебсайт
Chrome DevTools ви позволява да прецените колко защитен е вашият уебсайт въз основа на параметри като наличността на сертификати за уеб сигурност и колко сигурна е връзката, между другото. За да проверите дали вашият уебсайт е защитен, щракнете върху Сигурност опция в горната част на DevTools.
The Сигурност раздел ви дава общ преглед на данните за сигурността на вашия уебсайт и ви казва всички потенциални заплахи.
Одитирайте уебсайта си
Chrome DevTools има функция, която ви позволява да проверявате цялостната производителност на вашия уебсайт въз основа на конкретни параметри.
За достъп до тази функция изберете фар опция в горната част на прозореца на DevTools. След това изберете параметрите, които искате да проверите, след това маркирайте или Подвижен или работен плот опции, за да видите как се представя вашата уеб страница на различни платформи.
След това кликнете върху Генериране на отчет за да стартирате анализ на вашата уеб страница въз основа на параметрите, които сте избрали по -рано.
Можете също така да оцените времето за изпълнение или зареждането на уебсайт, като щракнете върху производителност опция. За да стартирате тест, кликнете върху иконата до Щракнете върху бутона за запис възможност за извършване на анализ по време на работа. Друга възможност е да кликнете върху бутона за презареждане под него, за да оцените ефективността на времето за зареждане. Кликнете върху Спри се за да спрете анализатора и да покажете резултатите.
Възползвайте се от Chrome DevTools
В зависимост от това за какво се нуждаете, Chrome DevTools ви позволява да правите нещо повече от просто отстраняване на грешки в уебсайтове. За щастие, DevTools са лесни за използване за програмисти от всички нива на умения. Можете дори да научите някои основи на разработването на интерфейси на уебсайтове, като потърсите изходния код на уебсайтовете, които посещавате.
как да играя ps3 игри на ps4
Може да откриете и някои други опции, които не обсъждахме в тази статия. Така че, не се колебайте да играете с наличните функции. Освен това промяната на тези функции не вреди малко на уебсайт.
Дял Дял Туит електронна поща Как да използвате Chrome OS на Raspberry PiНе можете да си позволите Chromebook? Търсите алтернатива на Raspbian? Ето как да инсталирате версия на Chrome OS на вашия Raspberry Pi.
Прочетете Напред Свързани теми- интернет
- Програмиране
- HTML
- Уеб разработка
- JavaScript
- Google Chrome
Idowu е страстен за всичко умно технология и производителност. В свободното си време той играе с кодиране и превключва на шахматната дъска, когато му е скучно, но също така обича да се откъсва от рутината от време на време. Страстта му да показва на хората пътя около съвременните технологии го мотивира да пише повече.
Още от Idowu OmisolaАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате