Edycja kodu źródłowego HTML za pomocą Google Chrome

34

W Internet Explorerze mogę otworzyć lokalny plik .html i edytować go, wybierając „Źródło” w menu „Widok”, dokonaj szybkiej zmiany, a następnie „Odśwież” (przeładuj) stronę internetową.

Jak mogę to zrobić za pomocą Google Chrome?

Czy mogę otworzyć plik .html w Notatniku Windows? (Lubię notatnik, ponieważ jest naprawdę szybki.)

— barlop
źródło

27

Ctrl+Shift+I or F12-> Elementy, powinno pokazać twoje źródło. Kliknij dowolny element prawym przyciskiem myszy i kliknijEdit as HTML

Edytować:

Istnieje kilka rozszerzeń, które wyglądają tak, jak chcesz: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditori Live WebSite Editorwyglądają obiecująco.

Dodane przez barlop
Widzę to (po Ctrl-Shift-I / F12), klikając prawym przyciskiem myszy <HTML..> or </HTML>znacznik i klikając „edytuj jako HTML”. pozwala mi edytować gdziekolwiek w nim. Wybranie tagu otwierającego oznacza, że wyskakujące okienko do edycji obejmuje po prostu całe dostępne źródło HTML - co jest bardzo schludne pod względem miejsca podczas edycji. Wybranie tagu zamykającego może być przydatne, ponieważ wyskakujące okienko pojawi się pod HTML, więc zobaczysz przed / po. Lub lepiej, jak mówi Benjamin, F2 do edycji, ctrl-enter, aby zatwierdzić.

— Casual Coder
źródło

1

spróbuj na przykład kliknąć dokładnie nazwę znacznika<body>

— Casual Coder

1

To narzędzie do debugowania. To nie jest narzędzie do edycji. Do tworzenia stron użyj czegoś takiego jak Aptana, Netbeans lub inne bardziej odpowiednie IDE. Z uzupełnianiem tagów, odniesieniami, uzupełnianiem javascript itp. Jest to o wiele bardziej produktywny sposób tworzenia stron internetowych. Jeśli nalegasz na używanie Narzędzi Chrome dla programistów jako edytora HTML, dostępna jest copy as htmlopcja menu kontekstowego. Możesz więc wkleić go z powrotem do głównego edytora tekstu lub innego narzędzia.

— Casual Coder,

1

Najbliższe temu, o czym mówię, o czym jestem świadomy, to dodatek Firebug w Firefoksie. Wśród wielu różnych narzędzi do debugowania javascript / css / dom oferuje ono w menu kontekstowym Open with Editoropcji strony . Możesz dodać kilku redaktorów. Oczywiście możesz go skonfigurować do używania Notatnika.

— Casual Coder

2

jest trochę szybsze przy użyciu F2 do edycji i Ctrl + Enter, aby zatwierdzić

— Benjamin

1

F2 i F2 ponownie wykonują to samo zadanie, co Ctrl + Enter.

— Frank Nocke

23

otwórz DevTools.
otwórz panel Elementy.
wybierz HTML lub treść lub inny żądany element.
otwórz konsolę Esc.
napisz 0.contentEditable = true

teraz możesz edytować tekst na stronie i przenosić obrazy, ale tak naprawdę nie chcesz :)

— Loislo
źródło

4

nie do końca to, czego chcę, ale to bardzo zabawna funkcja!

— barlop

Czy mam rację, że jest ono domyślnie włączone w bieżących wersjach Chrome? Mam na myśli, że mogę już edytować na karcie Elementy.

— Alex

Właśnie dałem ci +100 za pomocą tej funkcji.

— Benjamin

Naprawdę niesamowita funkcja

— iroel,

@Benjamin Czy poważnie myślisz o +100 (tj. Czy dałeś mu dodatkowe głosy w lokalnej kopii, oczywiście nie będzie to miało wpływu na samą witrynę, ale nadal), to byłoby interesujące. Jak to zrobiłeś? czy robiłeś bardzo zły i wprowadzający w błąd żart?

— barlop

1

Możesz wypróbować ten InlineEditor do edycji i zapisywania statycznego kodu HTML na stronach przeglądarki tutaj jest wersja demonstracyjna

— MKK
źródło

1

Jeśli chcesz edytować plik jako źródło HTML (a nie poszczególne elementy), możesz wykonać następujące czynności:

wybierz zakładkę „Źródła” po lewej stronie
kliknij prawym przyciskiem myszy w panelu „Źródła” i wybierz „Dodaj folder do obszaru roboczego” i dodaj folder ze źródłowym plikiem HTML
kliknij prawym przyciskiem myszy plik HTML, który chcesz edytować, i wybierz „mapuj do zasobu sieciowego”

— Paul Troon
źródło

To jest właściwy sposób na rozwijanie się w przeglądarce

— sidonaldson