Introducere în Web Development

Ne vom scrie codul într-un editor precum VS Code. Însă uneori ne va fi mai ușor să testăm anumite chestii direct în browser. Toate browserele moderne vin cu un set de unelte care ajută programatorii web să facă site-uri și aplicații mai rapid și eficient.

Acestea se numesc Developer Tools, sau DevTools.

Deschidere

Pentru a deschide DevTools, combinația de taste depinde de sistemul de operare și uneori de browser

• Tasta F12 poate activa DevTools pe anumite browsere de Windows și Linux, inclusiv Chrome OS.

• Combinația Ctrl+Shift+i de obicei funcționează dacă nu a funcționat F12.

• Combinația ⌘+⌥+i funcționează pe MacOS. Dacă nu vezi acele simboluri pe tastatura pe care o folosești, caută Cmd+Opt+i sau Win+Alt+i

• Dacă nu îți place să folosești tastatura, poți face Click-Dreapta pe pagină și să alegi „Inspect” sau „Inspect Element”.

Odată deschis, DevTools va apărea probabil pe una din laturile ferestrei de browser, fie în Dreapta, fie în Jos. Poți căuta cum se modifică această poziționare în caz că te deranjează.

Pe Safari, va trebui mai întâi să activezi funcționalitățile pentru dezvoltatori.

Funcționalități

DevTools au foarte multe funcționalități, dar pentru ce ne interesează pe noi la acest curs, vom avea nevoie doar de secțiunea Elements (Inspector în Firefox). Aici avem acces la codul HTML și proprietățile CSS care se aplică unui element de HTML selectat.

Poți face ce modificări vrei aici. Le vei vedea doar tu și vor dispărea când reîncarci pagina. Poți încerca să strici orice site public, chiar și Școala Web.

La un moment dat, vom folosi și o unealtă numită „Responsive design mode” în Firefox și „Device Toolbar” în Chrome. Aceasta ne permite să vedem cum ar arăta pagina noastră pe diferite dispozitive și mărimi de ecran. Putem selecta dintr-o listă predefinită, sau putem introduce dimensiunile pe care ni le dorim.