社員ブログ

こんにちは、技術部開発チームのエンドリューです。今回はブラウザのコンソールを使ってHTMLを操作するテクニックについ書きたいです。
ブラウザのデベロッパーツール（開発者コンソール）はHTMLを直接操作したり、Webページを編集することも可能です。
２つの便利なテクニックを紹介したいです。
１）入力されたパスワードを可視化する方法（type=”password” → type=”text”）
２）Webページを編集可能にする方法（document.designMode = “on”）

ブラウザに保存されたパスワードを確認したい時に、パスワードマネージャーで保存された情報を表示するには、さまざまな認証が必要で、少し面倒に感じることもあります。
また、入力したパスワードを表示する機能が用意されていないWebサイトもあります。
この方法で、パスワードフォームの値が確認できます。

ブラウザ上でWebページをリアルタイムで編集できたら便利だと思いませんか？
document.designModeを使うと、ワードのようにWebページのテキストを直接書き換えることができます。
UI検証、ミーティング中のプレゼン（Webページを使って編集）など、この方法を活用できます。

開発コンソールを使えば、確認作業やUIの作成に便利です。
紹介した方法は一時的な変更で、ページをリロードすれば元に戻ります。
ぜひ活用してみてください。