web-dev-qa-db-ja.com

Google ChromeでHTMLソースコードを編集する

Internet Explorerでは、ローカルの.htmlファイルを開き、[表示]メニューの[ソース]を選択して[変更]をクリックし、次にWebページを[更新]（再読み込み）して編集できます。

どうすればGoogle Chromeでそれができますか？

Windowsのメモ帳で.htmlファイルを開くことができますか？ （本当に速いからメモ帳が好きです。）

google-chromebrowserhtmlnotepad
34
barlop

Ctrl+Shift+I or F12 - > Elements、それはあなたの情報源を示すべきです。任意の要素を右クリックしてEdit as HTMLをクリック

編集：

あなたが望むもののように見えるいくつかの拡張機能があります。 https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditorとLive WebSite Editorは有望に見えます。

barlopによって追加されました
（ctrl-shift-I/F12の後）、<HTML..> or </HTML>タグを右クリックして「edit as html」をクリックするのがわかります。私はその中のどこでも編集することができます。開始タグを選択することは、編集用のポップアップがそこにあるすべてのHTMLソースをカバーすることを意味します - これは編集時のスペースに関して非常にきれいです。終了タグを選択すると、ポップアップがhtmlの下に表示されるので便利なことがあります。あるいは、ベンジャミンが言っているように、F2を編集するには、ctrl-enterを押してコミットします。

27
Casual Coder
  1. devToolsを開きます。
  2. 要素パネルを開きます。
  3. htmlかbodyかあなたが望む他の要素を選択してください。
  4. escでコンソールを開きます。
  5. $ 0.contentEditable = trueと書いてください

今、あなたはページ上のテキストを編集して画像を移動することができますが、それはあなたが本当に欲しいということではありません:)

23
loislo

ファイルを（個々の要素ではなく）HTMLソースとして編集したい場合は、次のようにします。

  1. 左側の「ソース」タブを選択します
  2. [ソース]ペインを右クリックして[ワークスペースにフォルダを追加]を選択し、ソースHTMLファイルを含むフォルダを追加します。
  3. 編集したいHTMLファイルを右クリックし、「ネットワークリソースへのマップ」を選択します。
1
Paul Troon

このInlineEditorを使ってブラウザページの静的HTMLを編集して保存することができます。これは デモです

1
MKK