Ajaxのデバッグ方法

質問

Ajax、Javascriptを勉強中なのですが、webアプリのデバッグに　Google Chrome Deveoper Tools　が非常に役立つと聞きました。
いざ使ってみようと思ったのですが、いまいち使い方がわかりません。

1年くらい前に、だれかのブログで「Google Chrome Deveoper Toolsを使えばjavascriptのコードも自由に書き換えることができる」という記事を見て自分の作ったアプリを公開しても問題ないのか不安を抱えています。
（ソース元は忘れましたが、変数の値ならまだしも、コードそのものを変更可能となると、WEBアプリをクラックさせることもたやすいので、そんなことが可能なのか気になっています。）

HTMLやCSSは tool上で書き換えることができ、ローカルに保存できることがわかりましたが、javascriptの変数の値やコードを書き換えて実行させることができません。

Google Chrome Deveoper Tools　で変数の値やコードの書き換えなどはできないのでしょうか？

回答No.1

tracer · ベストアンサー

chromeに限らず、どのブラウザでもjavascriptを使って自由に読み書きできます。
また、どんなに難読化したとしても解析されますし、今時のブラウザならスクリプトの整形機能もついてます。
ブラウザが実行するjavascriptとはそういうものです。
従って、セキュリティ的に好ましくないものをjavascriptに隠蔽すべきではありません。
当然、ajaxの通信内容もすべて見ることができます。
変数名やサーバーに投げているget情報、post 情報などすべてです。
従って、サーバー側でのセキュリティ対策が重要になります。
ただし、誤解のないように念のため付け加えると、webサーバーに保存してあるjavascript(本体)が書き換えられるわけでなく、読み書きできるのはあくまでユーザーがロード(ダウンロード)したファイルです。

お礼

お返事有難うございます。

とても勉強になります。

＞どんなに難読化したとしても解析されますし、今時のブラウザならスクリプトの整形機能もついてます。
つい先ほど、chromeを操作していてボタンを押すだけで整形できることにびっくりしました。（今更ですが。。。）
ただ、難読化することでファイル容量が節約できるので、難読化という意味合いではなく軽量化ってことで、難読化の作業も実施していく予定です。

＞ブラウザが実行するjavascriptとはそういうものです。
たぶん自分はわかったようでちゃんと理解できていないから、今回の質問に至ってしまったんですね＞＜ノ。

＞変数名やサーバーに投げているget情報、post 情報などすべてです
これはPHPでアプリ作っていた時に確認してきたので知っていましたｂ。

＞サーバー側でのセキュリティ対策が重要になります。
こういうアドバイスを頂けた事に自分がすべき事が見えてきました。有難うございます。

＞webサーバーに保存してあるjavascript(本体)が書き換えられるわけでなく、読み書きできるのはあくまでユーザーがロード(ダウンロード)したファイルです。
クライアントサイド、サーバーサイド、わかったつもりでも、新しいことを実装しようと思うとこれらプログラムの仕組みについてちゃんと理解していないんだなと改めて認識しました。

日曜プログラマーですけど、精進します。
アドバイス有難うございました。