現在プログラミングを学んでいます。 ブラウザの文章を選択した状態でソースコードを表示し、かつその選択箇所もソースコードに記されているという便利なブラウザやアプリケーションはご存知ですか?

現在プログラミングを学んでいます。 ブラウザの文章を選択した状態でソースコードを表示し、かつその選択箇所もソースコードに記されているという便利なブラウザやアプリケーションはご存知ですか? 理想としては、ブラウザの上半分は、記事そのもの。そして下半分にはソースコードが表示されていて、記事や画像などの選択箇所がソースコードの該当箇所にマークされている感じのモノです。 普段クロームやIEを使っていまして、それらでソースコードだけ表示させることは出来ますが、上記のような表示をさせたいのです。 私はまだまだプログラミング初心者なので、コードとブラウザ表示の相関性を知るためにも必要だと思った次第です。 ちなみにmac とウィンドウズ両方使います。 ご存知の方、教えてください。

Internet Explorer174閲覧xmlns="http://www.w3.org/2000/svg">25

ベストアンサー

0

chromeで文章を選択した状態にして、右クリック「要素の検証」を行うと、開発ツールが表示されて、該当のソースコードも同時に表示されます。また、開発ツールの一番したに、虫眼鏡があるので、それをクリックしてブラウザの文章に持っていき、クリックすると、「要素の検証」と同様に該当のソースコードに遷移出来ます。IEは分かりませんが、Firefox/Safariも同様な機能があります。 またBracketsエディタだと、リアルタイムプレビューが出来て、ソースコード編集中に、chromeで編集しているところが薄い青になります。NetBeans,JetBrains系もリアルタイムプレビューが出来ますが、Bracketsはインストールしてすぐにchromeで使えたので便利です。

ThanksImg質問者からのお礼コメント

chrome で上手く出来ました。これで勉強&開発がはかどりそうです。 ありがとうございました。

お礼日時:2013/9/16 23:58

その他の回答(2件)

0

① FirefoxにはFirebugというアドオン(プラグイン)があります。 IEやクロームでは、開発者ツールが既に備わっています。 また、IEやクロームにもFirebugのアドオンがあります。 ② 使いやすいのは FirefoxにはFirebug

0

Chrome をお使いならば、文章を適当に選択したままで、F12 キーを押してみてください。 Chrome に最初から備わっている開発用ツールが起動し、ページの HTML ソース、CSS ソース、JavaScript ソース、DOM の様子などを見る事が出来ます。 似たようなツールは IE にも Safari にもありますが、使いやすいのは Chrome と Firefox です。