javascriptの実行結果のソースがすぐみれる!これは知らなかった!

カテゴリー︎: 【なるほど!】

javascriptの実行した結果をwebブラウザで確認はできるけど、

実行結果のhtmlソースを確認するのはできない。。。と思っていたけど

ブラウザの機能で、さくっとできるじゃん!

しらなかった。。。

こんな簡単な方法があるとは! 
実行ソースが見れない例と実行ソースが見れる例を作りました。

(実行ソースが見れない例)
(1)javascriptで計算した結果↓

通常ソースを見たい時は右クリックで「ページのソースを確認」ボタンを押すが。。。

これでは、プログラム自体のソースがでてしまい、実行結果がみれない。。。↓

ブラウザ上ではもちろん結果の確認はできるのだが
javascriptで実行した結果のソース。が見たいのです。

その方法は、ブラウザの機能を使えば簡単にjavascriptで実行結果のソースがみれます。

Safariの機能を使う場合

(実行ソースが見れる例)
(1) ソースを見たいwebページを表示する

(2) ページ内を全選択(commnd + a)

(3)右クリックで「要素の詳細を表示」ボタンを押す

(4)ほら見れた! 実行結果の「150」のソースが見れたよ!

今回のサンプルは単純な計算結果のソースしか表示していないですが、

jsonデータなど使う時は重宝できる小技だと思います!

ちなみに、Chromeでも同じやりかたでソースの確認できます。

そして、Firefoxの場合は「選択した部分のソースを表示」で実行ソースが見れます。

個人的にFirefoxの実行結果のソースがみやすいですね。。。
javascriptの実行結果のソース↓

PAGE TOP