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.)

google-chrome browser html notepad barlop
źródło

Odpowiedzi:

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
  1. otwórz DevTools.
  2. otwórz panel Elementy.
  3. wybierz HTML lub treść lub inny żądany element.
  4. otwórz konsolę Esc.
  5. 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:

  1. wybierz zakładkę „Źródła” po lewej stronie
  2. 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
  3. 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