プログラミングに関する試行錯誤の記録を残します。先日JSの開発/デバッグで開発者ツールを使っていたら、何それ?と言われてしまいました。開発者ツールの存在を知らない方もいるようなのでこの機会にシェアしてみようと思います。大半のブラウザではキーボードのF12キーで表示されます。Chromeなので、例としてChromeの画面を以下に示します。複雑なように見えますが、最低限知っておきたい機能について解説していきます。各タブの説明Elementsタブページを構成するDOM要素が表示されるタブです。主な機能としては、以下の通りです。下記赤枠のボタンで指定のDOM要素の構成が確認可能です。普段は属性等が正しく設定されているかの確認に使用。緑枠で選択した要素に設定されているCSSが赤枠に表示されます。任意のプロパティの追加/削除、値の変更等も可能です。ページを更新すると元に戻ります。Consoleタブデバッグ情報やログが出力されるタブです。主な機能としては、以下の通りです。デバッグメッセージの表示の確認console.log()等で出力されるデバッグメッセージの表示を確認します。下記赤枠ボタンでログがクリアされます。出力処理を行っているロジックへのジャンプ出力されているログ行の右側にリンクが表示されており、そこから該当箇所へジャンプが可能です。一時的なスクリプトの実行コンソールからスクリプトの実行も可能です。上記のように、任意のJavaScriptが実行可能です。いえ、これに関しては使用頻度低めでしょうか・・・。Sourceタブ現在のページのHTML/JavaScript/CSSが表示されます。主な機能としては、以下の通りです。現在適用されているソースの解析が可能。以下は、このサイトの適用ソース(プラグイン)のソースを表示しています。ブレークポイントの設定とりあえずこれだけ知っていれば良い印象。Studioみたいにソース中にブレークポイントが設定できる。・即時関数の場合は画面表示時に実行されるので、ブレークポイント設定後、表示を更新すると反映される。・開発者ツールを非表示にするとブレークされない。おわりにIE、Firefoxでも確認しましたが、ほぼほぼ同じUIでした。ローカルでサクサク確認できる環境がある場合は、そちらの方が良い事は言うまでもないです・・・。投稿一覧SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#ができます。現在はVue.js、Python辺りを勉強中です。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。お問い合わせのページからご連絡下さい。2020.02.03jQueryUIのダイアログで、ダイアログ内のボタンクリックをトリガーとして待つような書き方に戸惑ったのでシェアします。2019.12.12以前、Handsontableで添付ファイルを表示するカスタマイズを行いましたが、それに引き続きのカスタマイズです。2020.02.01以前Vue.jsでTODOリストを作ったのですが、UI部分は改善の余地がありました。調べると、Vue.js向けのマテリアルデザインフレームワークV[...]スポンサーリンクプロフィールNaoki(@nkwtnb)SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#/Vue.js/Python/etc...作曲/編曲もします。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。記事の内容について問い合わせ等ございましたら、お気軽にTwitterのリプかDM、またはお問い合わせのページからご連絡下さい。Ganttプラグインを使ってみた感想。