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


34

Internet Explorerでは、ローカルの.htmlファイルを開き、[表示]メニューの[ソース]を選択して編集し、簡単に変更してからWebページを[更新](リロード)できます。

Google Chromeでこれを行うにはどうすればよいですか?

Windowsのメモ帳で.htmlファイルを開くことはできますか?(メモ帳はとても速いので好きです。)

回答:


27

Ctrl+Shift+I or F12->要素、ソースが表示されます。任意の要素を右クリックしてクリックしますEdit as HTML

編集:

希望どおりの拡張機能がいくつかあります:https : //chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditorLive WebSite Editor有望に見えます。

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


1
たとえば、タグ名を正確にクリックしてみてください<body>
カジュアルコーダー

1
これはデバッグツールです。編集ツールではありません。ページを作成するには、Aptana、Netbeans、または他のより適切なIDEなどを使用します。タグ補完、参照、javascript補完など。これは、Webページを作成するより生産的な方法です。Chrome開発者ツールをHTMLエディターとして使用することを主張する場合、copy as htmlコンテキストメニューオプションがあります。そのため、選択したメインテキストエディタまたは他のツールに貼り付けることができます。
カジュアルコーダー

1
FirefoxのFirebugアドオンは、私が知っていると言っていることに最も近いものです。多くのさまざまなjavascript / css / domデバッグツールの中で、ページOpen with Editorオプションのコンテキストメニューを使用できます。複数のエディターを追加できます。もちろん、メモ帳を使用するように構成できます。
カジュアルコーダー

2
F2キーを使用して編集し、Ctrlキーを押しながらEnterキーを押してコミットすると少し速くなります
ベンジャミン

1
F2とF2は再びCtrl + Enterと同じジョブを実行します。
フランクノック16

23
  1. DevToolsを開きます。
  2. 要素パネルを開きます。
  3. htmlまたはbodyまたは必要な別の要素を選択します。
  4. Escでコンソールを開きます。
  5. 書き込み$ 0.contentEditable = true

ページ上のテキストを編集して画像を移動できるようになりましたが、本当に必要なわけではありません:)


4
本当に私が欲しいものではありませんが、それは非常に面白い機能です!
barlop

現在のChromeバージョンでこれがデフォルトでオンになっているのは正しいですか?つまり、すでに[要素]タブで編集できます。
アレックス

この機能を使用して+100を提供しました。
ベンジャミン

本当に素晴らしい機能
イロエル

@Benjamin +100について真剣に考えていますか(つまり、ローカルコピーに余分な票を投じて、サイト自体には明らかに影響を与えないようにしましたが)、それは興味深いでしょう。または、非常に悪くて誤解を招くような冗談を言っていましたか?
-barlop

1

あなたは編集するには、このInlineEditorを試してみて、ここでは、ブラウザのページの静的なhtmlの保存であることができますデモ


1

ファイルを(個々の要素ではなく)htmlソースとして編集する場合は、次の操作を実行できます。

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

これはブラウザで開発する正しい方法です
-sidonaldson
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.