title_firefox_dom.png

簡単にDOM操作後のソースを確認する方法をご紹介。

DOM操作っていうのは分かりやすく言えば、JavaScriptを使用してWebページの内容や配置、スタイルを操作する事です。

例えばソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」で紹介しているScriptもDOMを操作するものです。

このDOM操作を行った場合に、ブラウザ上でソースを確認しても操作前のソースしか表示されません。

そこでFireFoxの「選択した部分のソースを表示」機能を使用します。

以下で実際に見てみましょう。

※この記事IEをお使いの方は全く楽しめません><

選択した部分のソースを表示

まずは以下にサンプルを。
↑でも紹介しているdp.SyntaxHighlighterを例に説明します。

実際の記述は以下の通り
<pre name="code" class="javascript">
</pre>

まずはCtrl+Uでソースを覗いてみてください。

こんな表示になると思います。


では、↑の部分を選択し、右クリック「選択した部分のソースを表示」で見てみてください。

今度はこんな表示になると思います。


こんな感じの小ネタでした。

このエントリーのトラックバックURL:

コメント

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)




太字 イタリック アンダーライン ハイパーリンク 引用

caraldo_K

Webディレクター的な事やってます!
iPhone楽しい!マラソン・ロードバイクで肉体改造計画中!でも一番好きなのは漫画です㌰㌰⋋( 'Θ')⋌㌰㌰

poooooon

最近Web屋になりました。iPhoneとねこが好きです。ロードバイクは好きと良く言いますが全然乗ってません。

Our tweets
Loading..

POWERED BY MT4