2019.11.14こんにちは、あのです。今回は現役システムエンジニアがWEBシステム開発でよく使うデベローパーツールの機能を紹介したいと思います。無料体験この記事はこんな方向けに書いています。Webシステム開発で求められる技術を知りたい。現場のSEの業務を少しでも知りたい。SEの仕事イメージを膨らませたい。それでは早速紹介していきます。storageまとめデベロッパーツールとはそもそもデベロッパーツールって何?というところから解説していきます。デベロッパーツールとは、ブラウザのChromeに備え付けられている機能の1つで、Webサイトのソースコード(HTML)やCSSの検証を行うことができます。どんなところで使われるの?これは、Web制作には必須の機能で、フロントエンジニアであれば、必ずと言っていいほど使われています。私のようにサーバーサイドエンジニアもWebシステム開発において、デベロッパーツールは必要不可欠のアイテムと考えています。フロントエンジニアとは、Webサイトのフロント部分を制御しているHTMLやCSS、Javascript、PHP等を主に扱うエンジニアのこと。サーバーサイドエンジニアとは、Webサイト内のサーバーサイドの処理を実装するエンジニアです。行う処理がサーバーサイドの処理に含まれ、JavaやRuby、Python、PHPなどの言語がよく使われます。表示するのは非常に簡単で、Chromeの設定メニューから「その他のツール」を選択し、「デベロッパーツール」を押すと使用することができます。実際に表示するとこんな感じ(設定によって表示方は異なります。ソースの確認と編集デベロッパーツールのメインの機能ですが、ソースコードを表示させて実装の不具合がないかを確認することが多々あります。HTML」をクリックすることで、直接編集することができます。◾️CSSを編集するStylesタブ内に現在選択されている要素に対して適用されているCSSが表示されています。ここに表示されているスタイルは直接編集することができ、即時反映することができます。確認、編集したい要素を直接指定するには、まず、矢印マークを押下します。その後、画面上で確認したい箇所を選択する。エミュレータエミュレータは、開発したWebシステムがiPhoneやAndroidのスマホで表示した際にどのような表示になるかを確認するためによく利用します。エミュレータを起動するには、矢印マーク横の2重窓を押下します。Chromeのデフォルト設定では、以下の9種類が選択可能ですが、追加することも可能です。networknetworkタグを選択肢た状態で、画面を再描画するとその画面で呼び出しているjsやcssなどを確認することができます。storageシステムの構造によりけりですが、これまでの経験で以外と使っているシステムは多かったです。LocalStorageやSessionStorage、Cookieなどを確認する際は以下のように「Appliaction」タブからストレージの状況を確認することができます。まとめいかがだったでしょうか。今回紹介した機能はほんの一部ではありますが、SEが業務上でよく使うのは実際このくらいです。以外と簡単でしたよね。SEやPG、デザイナーなど職種によって変わる部分ではありますので、参考にしていただけたら嬉しいです。私は現在4年ほどWEB系のシステム開発に携わってきていまして、これまでの経験で楽しいことも辛いこともたくさん経験してきました。そんな中で、私が感じたシステムエンジニアとしての仕事のやりがいや魅力について紹介していきたいと思います。昨今、エンジニアの需要が高まり、これからIT業界で働きたいという人も多いのではないでしょうか。そこで現役エンジニアが具体的な仕事内容を紹介し、必要なスキルなどをアドバイスします。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。あのまとめ.メニュー2chWordPressホーム検索トップサイドバータイトルとURLをコピーしました。