To, że będzie to dość krótkiego filmu.
Chcę tylko podkreślić niektóre z narzędzi programistycznych, że Google Chrome daje nam pracować z każdego zespołu i zobaczyć oceny.
Więc to jest lista zadań do wykonania, które zrobiliśmy w poprzednim filmie.
To nadal brzydka jak to było wtedy i chcę tylko podkreślić dwie rzeczy.
Więc pierwsze rzeczywiście możemy przeglądać strony źródłowej tak jak zrobiliśmy w innych narodów.
Każdy wyszedł tak wcześnie w tym kursie, ale to nie wszystko, co użyteczne.
Nie możemy zmienić tego czy coś, ale co możemy zrobić, to kliknąć prawym przyciskiem myszy i kliknij sprawdzić element.
A co to będzie zrobić, to uruchomić elementu inspektor.
Więc widać mamy tutaj ten nowy widok.
Więc jest kilka kart Jedziemy, aby poznać wszystko to w czasie.
Na razie jesteśmy po prostu zaczynając Ta zakładka elementu.
Więc co to jest to rzeczywiście miły interaktywne przedstawienie wszystkich elementów.
Więc widać, mamy doctype.
Każdy zespół będzie miał głowę ciała.
Albo każdy jeden lub my i nasi sojusznicy, jak i wejścia, a pierwszą rzeczą, którą chcę Ci zauważyć, jest jak unoszą się nad tymi elementami.
Warto więc unoszą się nad tym H-1.
To rzeczywiście podświetlony tutaj.
Więc unosić tutaj i to podświetlone, aby pokazać mi, tu jest jeden, że mówisz.
Oto UL lub tutaj jest pole wprowadzania.
Oto tekst i tak dalej.
Więc to jest przydatne w sobie.
Wystarczy, aby debugować rzeczy i zobaczyć, jakie miejsca elementem jest podejmowanie i gdzie spadnie w przepływie dokumentu.
Ale to, co naprawdę chcę skupić się tylko na kartę CSSA tutaj zakładce Style.
Warto więc wybrać jeden z tych rzeczy.
Załóżmy, wybierz tę sojusznika z klasą zakończone szczyt lub drugi.
I zamierzam na nią kliknąć.
A tutaj jestem naprawdę widząc interaktywny widok wszystkich stylów, że element ten został zastosowany wobec niej komunikatu.
Widzimy więc, ze względu na ukończony klasy ma ona tę linię dekoracji tekstu poprzez bo kodu lotnego, który napisałem dla wszystkich sojuszników.
Ma czerwone obramowanie i co możemy zrobić, to faktycznie włączyć je włączyć lub wyłączyć.
Więc teraz nie włączać wszystkich sojuszników czerwone granice off.
Mogę włączyć je z powrotem i mogę zmienić to tu mieszka za 6 pikseli lub 10 lub jeden piksel.
Mogę kliknąć na kolor i wybrać nowy kolor nadać mu niebieską ramkę.
Jedna rzecz, którą trzeba podkreślić choć w rzeczywistości nie zmienia nasz plik w ogóle.
To jest tylko w przeglądarce jak tylko odświeżyć stronę lub zamknąć okno moje zmiany odejść.
Więc to jest przydatne w naprawdę dwa różne sposoby.
Jednym z nich jest pracować na własnym kodzie własną stronę i testowe rzeczy i zobaczyć, co się dzieje, kiedy zmienić kolor lub zmienić granicę lub zmienić jakiś inny atrybut niektóre z ich własności i po prostu wizualnie zobaczyć go natychmiast.
Inną rzeczą, która jest przydatna dla faktycznie patrząc na kod cudzego.
Więc mam MVNO otwarty tylko na stronie głównej.
Powiedzmy, że chciał wiedzieć coś więcej na temat tego tekstu tutaj.
Co mogę zrobić, to rzeczywiście na nim prawym przyciskiem myszy i kliknij na inspekcję element.
A jeśli kliknę na elemencie w szczególności będzie to faktycznie podświetlonego dla mnie.
Więc widać, że wskoczył od razu do odpowiedniego znacznika który jest H-1 wspólna wiedza.
A potem to rozpiętość w niej również.
Mówi do otwartej sieci.
Więc rzućmy okiem na H-1.
I tu mam wszystkie style.
Tak więc pierwszy z nich jest kolor.
Gdybym zmienić kolor, że H-1 zmian.
Więc powiedzmy, że chciałam wiedzieć czcionkę więc chciałbym przewinąć w dół i w pewnym momencie, że ktoś Mazola napisał style, które stosuje czcionkę.
Tu chodzi o to, i to, co mamy zamiar skupić się w ciągu najbliższych kilku filmów jest to, że może to być dziedziczone z innego przełącznika gdzieś.
Tak więc mogą być stosowane do całego organizmu nie tylko H-1, bezpośrednio.
Więc jeśli przewinąć to wygląda, że ​​to właśnie tutaj.
Font otwarta rodzina wysyła zapalić bardzo prawdziwy sens, jeśli i to wygląda, że ​​to robi.
Więc nie jest to, aby pokazać, w jaki sposób właściwie robimy fontu.
To osobny film zbliża się szybko.
To jest po prostu pokazać, że jeśli chce znaleźć coś o stronie powiedzmy chciałam wiedzieć, jaki rodzaj elementu są te przyciski tutaj.
Rola ikony mogę wybrać się lupą i najedź na rzeczy, a następnie kliknij i będzie mi to pokazać, że tu oka.
Więc oko to kolejny znacznik używany do ikon i widzimy wszystkie style tutaj.
To samo, jeśli chcę zobaczyć, co elementem jest tutaj mogę kliknąć na nim raz mają lupę i widzę, że jest to tag kotwicy i to wygląda.
Więc to nie jest to obraz tag tag kotwicy, która musi oznaczać, że są one ustawienie obrazu tła gdzieś i zobaczmy, gdzie to jest.
No to ruszamy.
Oni ustawienie obrazu tła za ten obraz tutaj.
Tak więc, aby podsumować to wszystko chciałem tylko pokazać, że można otworzyć ten inspektor w Google Chrome i można zobaczyć HMO i można przeglądać oceny i nie tylko można go zobaczyć, ale można manipulować można komunikować się z nim jesteś można spróbować zmienić rzeczy i można to zrobić na własnych stronach czy można zrobić na miejscu nikogo innego.
A więc jest to bardzo przydatne, gdy chcesz wyjść i replikować projekt czyjąś gdzie chcesz replikować w mocy.
A kiedy mamy do JavaScript zobaczyć, że rzeczywiście możemy zrobić dokładnie to samo dla javascript, jak również.