デベロッパーツール。 デベロッパーツールの使い方【PCでスマートフォン表示を確認する】

デベロッパーツールの使い方【PCでスマートフォン表示を確認する】

デベロッパーツール

モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。 そして、今やほとんどのブラウザーではWindowsの場合 F12キーを押すことで(Macの場合は Command+ Option+ Iキーで)手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。 なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chromeのデベロッパーツールは日本語化されていないため、メニューやメッセージが全て英語になってしまうが、それを踏まえてもあまりある豊富な機能が提供されている。 まずは[Developer Tools]ウィンドウ全体の構成から見ていこう。 Chromeでどこかのページを表示した状態で F12キー(Windowsの場合。 Macの場合は Command+ Option+ Iキー)を押すと、デベロッパーツールが表示される(次の画面を参照)。 デベロッパーツールを起動したところ• 1Webページ上の要素を、マウスを使って選択できる。 虫眼鏡アイコン。 2スマートフォンなどの表示を確認するためのエミュレーション・ウィンドウの表示/非表示を切り替える。 デバイスモード・アイコン。 3各タブは「パネル」と呼ばれており、このパネルで機能を切り替えることができる。 ドロワー(=引き出しを意味する「drawer」)は、実際に引き出しのように下からスライドして表示されたり、隠されたりする。 5デベロッパーツールの詳細な設定をする設定ダイアログの表示/非表示を切り替える。 6デベロッパーツールを別ウィンドウにするか、下辺か右辺のいずれかにドックするかを切り替える。 このウィンドウを使いこなすための重要ポイントだけ、簡単に説明しておこう。 上部に表示されているタブメニュー( 3)は「パネル」と呼ばれる。 各パネル内に、デベロッパーツールの機能がまとめられている。 6は、[Developer Tools]ウィンドウをChromeの下部に統合するか、別ウィンドウとして独立させるかを切り替えるものである。 本稿では、以下の各パネルの機能を一通り説明する(リンクをクリックすると該当箇所にジャンプできる)。 最後のはパネルではないが、便利な機能なので紹介したい。 それでは、[Elements]パネルから説明していこう。 [Elements]パネル Elementsパネルは、タグの要素とスタイルを検証するための機能であり、Web開発者が最も多く使う機能である。 まずはパネル内の機能から解説していこう。 [Elements]パネル パネル内には主に下記の4つの機能がある。 それぞれの機能内容は、以下の本文で説明している。 1虫眼鏡アイコン。 2DOMエレメントツリー。 3サイドバー。 4パンくずリスト。 DOMエレメントツリー( 2)は、ブラウザー部分で表示中のWebページのHTML要素をツリービュー形式で表示したものである。 ここで選択された要素のCSSスタイルなどの情報がサイドバー( 3)に表示される。 また、現在表示している要素の階層はパンくずリスト( 4)に表示される。 ページ要素が多い場合、検証したい要素を探すために、ツリーを展開していって探すのは非常に面倒だが、虫眼鏡アイコン( 1)をクリックすると、普段見ているWebページ上で検証したい要素をクリックして選択できる検証モードに切り替わる。 次の画面は、実際に検証モードに切り替えて、Googleのタイトル画像をクリックして選択したところだ。 グループ 目的 Styles 要素に設定されたCSSスタイルを確認できる パネル内の[Metrics]表示: 要素の位置(position)、マージン(margin)、境界線(border)、パディング(padding)、要素のサイズを確認できる また、下に検索ボックスがあってCSSスタイルの絞り込みができる Computed 最終的に要素に適用されたスタイルを確認できる パネル内の[Show inherited](=継承されたスタイルの表示)チェックボックス: 要素に設定されたスタイルだけでなく、親要素やブラウザーデフォルトのスタイルも含めて表示する。 また、最終的な[Metrics]も表示される こちらも、下部の[Filter]入力欄で探したいCSSスタイルを検索できる Event Listeners 要素に関連付けられたイベントを確認できる DOM Breakpoints 要素に関連付けられたブレークポイント(=実行がいったん停止される場所)を確認できる(詳細後述) Properties JavaScriptコードからアクセスできる、要素やオブジェクトなどのプロパティを確認できる Stylesグループ内のスタイル表示3: 色要素の編集はカラーピッカーが表示されて、イメージに近い色を選択できる DOM Breakpointsグループ DOM Breakpointsグループは、その名の通り、DOM(Document Object Model)のイベントに対するブレークポイントである。 Webアプリケーションでは、JavaScriptなどを使って動的に要素が変化するページが、「ほとんど」と言ってもよいほど多い。 それに伴い、「これらの要素が変更されるタイミングでスクリプトをデバッグしたい」というケースも増えている。 DOM BreakpointはDOM要素(=DOMエレメント)にブレークポイントを張れる機能である。 次の画面は、要素にブレークポイントを張ろうとしているところだ。 Networkパネル ページのリクエストとダウンロードされるまでの時間が表示される。 1 [Status]列: HTTPステータス。 2 [Initiator]列: ファイルを呼び出す起点。 例えばJavaScriptコードから読み込まれたときには、そのJavaScriptファイル名が表示される。 3 [Time]列: ダウンロードにかかった時間。 上がリクエストから受信が完了するまでの時間。 下がリクエストから受信開始するまでの時間。 4 [Preserve log](ログの保持): ページを遷移してもログを残しておくように設定する。 5 フィルター: フィルターアイコン( )をクリックすると( のようにアイコンの色が変わり)、リクエストの種類をフィルターして特定の項目だけの表示に切り替えられる。 これにより、任意のキーワードや、次の画像に示す[Documents]や[XHR]などに対象を絞って、ページで使用されているファイルやデータを確認できる。 ちなみに「XHR」は「XMLHttpRequest」の略だ。 タイムラインの各項目上にマウスカーソルを当てるとさらに詳細な時間が表示される(次の画面)。 タイムラインの詳細表示 タイムライン上の項目にマウスカーソルを当てると、主に下記の4つの情報が表示される。 項目によっては、後掲の「NetworkパネルのTimingタブ」の画像で説明している[DNS Lookup][Connection][SSL]などの情報も表示される。 1 Blocking: サーバーへの接続の再利用やプロキシへの接続などリクエスト送信までの待ち時間。 2 Sending: リクエストの送信時間。 3 Waiting: サーバーがレスポンスを返すまでの待ち時間。 4 Receiving: 受信開始から完了までの時間。 各通信項目の詳細表示 一番左の[Name]列のファイル名をクリックすると、さらに詳細を確認できる。 基本的に、下記の5つのタブが表示されるが、通信項目の種類によっては一部のタブは表示されない。 Headersタブ• Previewタブ• Responseタブ• Cookiesタブ• Timingタブ Headersタブ Headersタブでは、HTTPリクエストとレスポンスのヘッダーを確認できる(次の画面)。 NetworkパネルのTimingタブ 主に下記の7つの情報が表示される。 項目によっては、前掲の「タイムラインの詳細表示」の画像で説明しているように4つの情報しか表示されない。 1 Blocking: Webサーバーへの接続までの待ち時間。 2 DNS Lookup: ドメインのDNSルックアップ。 3 Connection: サーバーとの接続にかかった時間。 4 SSL: SSLハンドシェイクにかかった時間。 5 Sending: 送信にかかった時間。 6 Waiting: 最初の応答を受け取るまでの待ち時間。 7 Receiving: 応答開始から終了までの時間。 特定のファイルのダウンロードが遅い場合、この情報を見て対応を検討できる。 例えば[DNS Lookup]に時間がかかっている場合、DNSプリフェッチを検討できる。 [Sending]や[Receiving]に時間がかかっている場合は、サーバーの物理配置の変更、CDNの検討、GZip圧縮の検討などが考えられる。 [Waiting]に時間がかかっている場合は、Webサーバー側の処理をチューニングすることを検討する必要がある。 このようにNetworkパネルを使用することで、ページが表示されるまでの時間を詳細に調査して、対応を検討できる。 [Sources]パネル Sourcesパネルは、CSSやJavaScriptのコードをデバッグできる機能である(次の画面はJavaScriptソースファイルが開かれている例)。 Visual StudioやEclipseのようなIDEと同様にデバッグに必要な機能が備わっている。 Sourcesパネル この例では、JavaScriptコードが開かれている。 1ページのソースファイルを一覧表示するnavigatorを表示する。 2ソースビュー。 3サイドバー。 4コード整形ボタン。 このパネルで便利な機能はコードの整形である。 コードの整形 最近のJavaScriptライブラリは通信速度を高速化するため、コードのインデントや改行を削ったミニファイされたコードが返されることが多い。 このようなコードは、プログラムとしては正しく動作するものの、人間がデバッグのために読もうとしてもなかなか読みづらいコードになっている。 デベロッパーツールには、このような「コードを読みやすく整形してくれるボタン」が準備されている。 以下の画面は実際にこのコード整形ボタンの実行前と実行後を比べたものだ。 項目 説明 Watch Expressions ウォッチ式。 [+]アイコンをクリックして追跡したい変数を追加できる Call Stack コールスタック。 ブレーク時の処理の呼び出し階層を確認できる Scope Variables ブレーク時に実行中のスコープにある変数とその値を確認できる Breakpoints JavaScriptコードのブレークポイント DOM Breakpoints Elementsパネルでも説明したDOMイベントのブレークポイントを確認できる XHR Breakpoints AjaxなどJavaScriptコードからのXMLHttpRequest呼び出しをドメイン単位でブレークできる Event Listener Breakpoints ページの中で発生したイベント単位でブレークを指定できる。 例えば、マウスのクリックやアニメーションの開始時など Workers Web Workersの開始時にデバッグを開始するかどうかを指定できる Sourceパネルのサイドバー上のグループの役割 サイドバーのメニューを見ただけでも豊富なデバッグ機能が提供されていることがご理解いただけたと思う。 次にこれらを使ってデバッグに便利な機能をいくつか紹介していく。 コールスタックをさかのぼって、実行済みの呼び出し元をデバッグする機能 まずは、デバッグでブレークしたときにスタックを逆回転できる機能だ。 具体的には、停止したときにCall Stackグループには関数の呼び出し履歴が表示されているので、停止している関数よりも前の処理を右クリックして、表示されるコンテキストメニューから[Restart frame]をクリックする(次の画面を参照)。 この手順により、呼び出し元にさかのぼってデバッグできる。 この機能はデバッグ機能の中でも非常に高度で有益な機能だ。 Timelineパネル 初期状態では何も表示されず、[Record](記録)ボタンを押してから、[停止](Stop)するまでの情報が記録される。 1[Record]ボタン/[Stop]ボタン。 2記録したレコードをクリアする。 3フィルターの表示/非表示を切り替える フィルターボタン。 このボタン( )をクリックすると( のようにアイコンの色が変わり)、フィルター用のキーワードを入力するためのテキストボックスや、次の画像に示す[Loading]や[Scripting]などでイベントの種類を絞り込めるチェックボックスが表示される。 これらを使って、イベント名や、処理時間(=全て/1ms以上/15ms以上で選択可能)、イベントの種類でフィルターできる。 4ガベージコレクターを実行する。 5デフォルトのEventsモードをFramesモードに切り替える(後述)。 6JavaScriptのコールスタックを記録する(後述)。 7メモリ情報を記録する(後述)。 8処理時間の内訳を円グラフで表示。 Timelineパネルのモード Eventsモード Timelineパネルは、デフォルトではページの表示で発生したイベントを記録したEventsモードで表示される。 次の画面に示すように、レコードされるイベントの種類は大きく4種類に色分けされている。 Eventsモード(前掲の「Timelineパネル」を再掲) 画面上部のサマリーに全体のイベント概要があり、画面中央部のレコード(RECORDS)に詳細なイベント情報(下記の4種類)が表示される。 青: Loading。 読み込み、ネットワークの送受信、HTML文書の解析など。 黄: Scripting。 スクリプトの実行、イベント処理、GC(ガベージコレクター)など。 紫: Rendering。 DOMの変更、ページのレイアウト、スクロールなどの描画イベント。 緑: Painting。 画像の処理。 このように表示されたタイムラインをフィルターなどで絞り込んでみて、時間がかかっている処理を見付け出してパフォーマンスチューニングをしていくのだ。 Framesモード 次は描画パフォーマンスを調べるFramesモードだ(次の画面)。 Framesモード 画面上部のサマリーでは、描画速度の概要が表示されており、画面中央部のレコード(RECORDS)に詳細情報が表示されている。 棒グラフの棒が長いほど描画に時間がかかっていることを表している。 この例では、一定の頻度で描画に負荷をかけている処理があることが分かる。 その処理を特定してチューニングしていけば、Webページの体感速度を上げることができる。 上の画面の例では、画面上部のサマリー領域を見ると、その一番右端に、上から[30 fps][60 fps]と表示されている。 要するに、横に引かれている上の線が30fpsで、中央の線が60fpsを意味するということが分かる。 つまり、この画面のページでいえば、60fps以上であればスムーズに描画されるということになる。 ほとんどのディスプレイは60Hzなので、ほとんどのケースで問題のない描画が行えると言えるだろう。 JavaScriptコールスタックの表示 [Stacks]をチェックすると、タイムラインを記録するときにJavaScriptのコールスタックを記録する。 コールスタックの表示 [RECORDS]でJavaScriptイベントを選択すると、[Details]タブにJavaScript処理のコールスタックが表示される。 なお[Details]タブは、[Developer Tools]ウィンドウを独立させている場合はこの画像のように下側、ドッキングさせている場合は右側に表示される。 このように処理に時間がかかっているJavaScriptコードを見つけてコールスタックを確認することで、具体的にどこから呼ばれている処理なのかを特定できる。 [Call Stack]にスクリプト名と行数が表示されており、クリックするとSourcesパネルでJavaScriptソースが表示される。 Memory使用量の表示 [Memory]をチェックすると、タイムラインのメモリ使用量を確認できる。 Memory使用量の表示 [Memory]をチェックすると、タイムラインで使用されているメモリ使用量が表示される。 画面上部のサマリーにメモリ使用量の増減グラフが表示される。 また、イベント表示(RECORDS)の下にメモリ(MEMORY)使用量の推移グラフが種類ごとに表示される。 アプリを長時間稼働させる可能性がある場合は、このグラフを見て、メモリの使用量が増加し続けていないかを確認するとよいだろう。 ただしここでは、種類ごとにグラフで確認できるが、さらに詳細を確認したい場合には、次に説明するProfilesパネルで確認するとよい。 [Profiles]パネル Profilesパネルでは、CPUやメモリの情報を収集して詳細を確認できる。 次の3つの情報を収集できる。 (1)Collect JavaScript CPU Profile: JavaScriptコードの関数が使用しているCPU利用率を収集する (2)Take Heap Snapshot: JavaScriptコードとDOMノードが使用しているヒープメモリのスナップショットを採取する (3)Record Heap Allocations: 確保したヒープを時間軸で記録する 次の画面は、Profilesパネルを開いたところ。 ここで、上記の3つのプロファイリングタイプの中から1つを選択できる。 複数のスナップショットを採取するとオブジェクトの比較ができるようになる このように複数のスナップショットを比較することで、任意のタイミングのメモリ使用状況を比較して、「何が増えているのか」を特定できるようになる。 (3)Record Heap Allocations Record Heap Allocationsは、時間の流れとともに確保されたオブジェクトとその保持状況を確認できる。 Auditsの結果 ページの内容を検証して、パフォーマンスを改善するための提案が一覧で表示される。 1つずつの詳細を解説することは避けるが、表示しているページでGZip圧縮を有効にすることを提案したり、未使用のCSS要素の削除を提案したりとページのパフォーマンスを改善するための提案をしてくれる。 全てをうのみにして実施すればよいというものではないが、一般的にWebのパフォーマンスを劣化させる原因になるものを提示してくれるので参考にして損はないだろう。 [Console]パネル Consoleパネルは、非常に強力な機能であり、コマンドライン入力により、さまざまな操作ができるようになっている(次の画面を参照)。 大きく分けると2つの役割を持っており、1つが「ログの閲覧」で、もう1つが「インタラクティブな操作」である。 そして実は、Consoleパネルは全てのパネルからアクセスできるようになっている。 そのため、Elementsパネルで要素を操作したり、SourcesパネルでJavaScriptのオブジェクトを操作したりと、デバッグに非常に便利な機能である。 変数名を入力することで、オブジェクトの中身を確認できる。 ここでは「a」という変数の中身が階層で表示されている ここでは、オブジェクトを作成して出力しているが、実際には、表示しているページで実行しているJavaScriptコードのオブジェクト状態を表示できる。 このように変数の中身が階層で表示されるので、状態を確認するのに非常に便利だ。 もちろん、値の変更も可能なため、デバッグにも役に立つだろう。 時間の計測 JavaScriptコードの処理に時間がかかっていて、その箇所の詳細を追うためにストップウォッチ(=実行時間を計測する機能)を使いたいことも多いだろう。 もちろん、そのためのメソッドが用意されている。 恐らくインタラクティブに入力することは少ないと思うが、次の画面の例では簡易的に入力することにする。 グループ化して処理時間を出力できる(各メソッドの意味は以下の本文に記述する) console. group ~ console. groupEnd でグループ化して、出力結果をまとめて表示できる。 なお、 groupメソッドは、タイマー以外の目的でも使用できる。 console. time ~ console. timeEnd で、時間を計測できる。 このとき、 timeメソッドの引数にラベルを指定することで、複数の時間を計測できるようになるため、ネスト構造での計測も可能になっている(この例では「重い処理」と「軽い処理」の2つの時間をネスト構造で計測している)。 パネルとしてはこれで全てだが、もう1つ便利な機能を紹介しよう。 デバイスモード(Device Mode) ブラウザーごとに振る舞いを変えているサイトや、モバイルデバイスでは異なる見た目になるように作っているサイトのテストを、Chromeだけでできるようにする機能がある。 具体的には次の画面のように、左上のデバイスモード・アイコンをクリックする。 ユーザーエージェント文字列は、デバイスを選択すると自動的に表示されるが、必要に応じてカスタム文字列を入力できる このように一般的なモバイルデバイスのエミュレーションがスッキリしたUIで実現されていることがご理解いただけるだろう。 もちろん、デバイスの表示を完璧に再現してくれるわけではないため、最終的な動作確認は実機が必要になるが、基本的な確認はChromeだけで済むため、開発効率は大幅に上がるはずだ。 CSSメディア [Emulation]ドロワーを開き、[Media]ペインで[CSS media]をチェックしてCSSメディア(printなど。 詳細後述)を選択する。 これにより、CSSメディアに基づいて表示内容を切り替えるWebページに対して、各メディアのときの表示内容を確認できる。 次の画面では、CSSメディアを「print」(=印刷用)にしたときの表示内容を確認している。 「print」以外にさまざまなメディアの種類が用意されている 「 braille: 点字で触覚フィードバックをするデバイス用」「 embossed: 点字印刷用」「 handheld: 帯域幅の限られた小型スクリーンなどの、携帯端末用」「 print: 印刷用」「 projection: プロジェクター用」「 screen: 一般的なスクリーン用」「 speech: 音声で読み上げるシンセサイザー用」「 tty: 固定幅文字グリッドメディア用(テレプリンターなど)」「 tv: テレビ用」。 ほとんどの場合は、「print」時の表示内容を確認するために利用することになるだろう。 印刷プレビューなどの操作をすることなく確認できるので便利だ。 CSSやHTMLのコードを編集して、リフレッシュするだけで出力内容を確認できるため、コーディングの手間がかなり省ける。 センサー(Sensors) [Emulation]ドロワーの[Sensors]ペインでは、さまざまなセンサー機器をエミュレーションできる。 [Emulate touch screen]は、マウスでタッチイベントをテストするための機能だ。 これをチェックしてタッチイベントに対応したページを操作すると、タッチ非対応のデバイスでもタッチ操作をテストできるようになる。 次の画面は実際にこの機能を使って、マウス操作で、タッチイベントをエミュレーションしている例だ。

次の

1.デベロッパーツールとは何か

デベロッパーツール

デベロッパーツールでできること• HTMLの要素の情報やCSSでのスタイリングの状態の確認• スマホやタブレット等の他デバイスでの表示確認• ページ内に存在するエラーや警告の確認• ページのリクエストをしてからの通信内容を一覧で確認 ・・・等々。 中でも最もよく使われるのがHTMLやCSSの状態の確認だと思います。 ページで表示崩れが発生した時などに、特定箇所のHTMLやCSSがどのように反映されているかリアルタイムで確認できるので、問題箇所をスピーディーに特定できます。 また他社サイトのコードも確認できるので、「この部分どうやって書いているんだろう?」と思った箇所を効率よく調べることができて便利です。 起動方法 はじめにディベロッパーツールの起動方法についてご紹介します。 まずはGoogle Chromeで適当なページを開いてみてください。 また毎回右クリックをせずに、キーボードショートカットで起動することも出来ます。 起動すると以下のような画面に赤枠箇所が表示されます。 Elementsタブ まずは下図の「Elements」パネルの基本的な使い方を見ていきたいと思います。 HTMLの操作 まずはHTMLを操作してみましょう。 下図のアイコンをクリックしてみましょう。 そして、ページ上の「主要」と書かれている部分をクリックしてみましょう。 クリックした要素に対応するHTMLの箇所がハイライトします。 エリア内の「主要」という部分をダブルクリックしてテキストを「あいうえお」と書き換えてみましょう。 ページも「あいうえお」とリアルタイムで反映されてます。 CSSの操作 次はCSSを操作してみましょう。 下図の赤枠箇所で操作ができます。 この箇所ではHTMLの該当箇所に影響を与えている全てのCSSが確認できるので便利です。 「想定していたCSSが適用されない!」といった場合に楽に原因を調べることができます。 例えば下図のように背景色を変えてみましょう。 すると下図のようにリアルタイムでサイトに反映されます。 上図のようなプロパティの編集の他、プロパティの追加や削除や無効化、新しいCSSの追加等も行えます。 当たり前ですが、ディベロッパーツールで加えた編集はブラウザ上のみで適用されるものですので、サイトの読み込みをしてしまうと元に戻ってしまうので注意してください。 Consoleタブ ConsoleタブはJavaScriptのエラーを確認できたり、任意のJavaScriptを追記して挙動などを確認することができます。 JavaScriptを追記する 下記のような形でJavaScriptを追記することができます。 このようなメッセージが連続して繰り返されるコードでは各インスタンスがそれぞれ出力されるのではなく、スタックされて図のように数字で表記されます。 レベルを変更する Default levelsをクリックすることでConsoleでの表示レベルを変更することができます。 他にもフィルターを用いて必要なJavaScriptを検索することができることなど、JavaScript関連でエラーの発生が疑われる時はこちらで確認しましょう。 Networkタブ Networkタブはページを開いた際にJavaScriptやCSS、画像などが読み込まれた時の通信を確認することができます。 リソース読み込み時間の測定をする 特によく使うのが右端に表示されているWaterfallです。 これはリソースの読み込み時間を示します。 ここで下記のように読み込み速度を確認することで極端にリソースの読み込み時間が遅いものに関しては改善するなど、サイト速度について改善の考察ができます。 気になるコンテンツにマウスオーバーすると以下のように詳細を見ることもできます。 終わりに いかがでしたでしょうか。 今回はデベロッパーツールのごく一部の機能の紹介でしたが、ここに挙げた機能の他にも様々な機能があります。 またChrome以外でも、SafariやFirefox、InternetExplorer等、他のブラウザでも同様の機能があります。 いろいろ触ってぜひ使いこなしていきましよう。 また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。 本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No. 1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。 ・レスポンシブECサイトがなぜ今選ばれるのか ・これまでのECサイトの課題とは何なのか ・どのようにすれば解決できるのか といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。 ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。 スマートフォン・モバイルのECサイト/非ECサイトの導入相談、売上アップのサポート等を行なっています。 テクニカルサポート、営業として培ってきたノウハウをベースとし、長期的な利益確保が見込めるスマートフォン&モバイルECサイト構築のコンサルティングや売上アップの施策をご提供。 ECサイト構築や運営のお手伝いをすることで、人々の生活が少しずつ豊かに変わっていく、そんな遠く先まで見つめながら、日々の業務に励んでいます。 関連する記事• 2016. 24 目次 1. 画像圧縮で読込速度改善 画像圧縮で読込速度改善 昨今のWebサイトではUX(ユーザーエクスペリエンス)や離脱率低減やのためにページ表示速度[…]• 2013. 12 こんにちは、ロックウェーブの岡本です。 弊社のレスポンシブCMS「aishipR」でもついにWordPressブログが作成できるようになりました。 W[…]• 2015. 07 […].

次の

Chromeデベロッパーツールの機能と使い方【初心者向け】

デベロッパーツール

Chromeデベロッパーツール 以下ツール とは?? Google Chrome搭載の、開発者向けの機能です。 以下のような様々なことを行うことができます。 HTML・CSSの確認と編集• ネットワークの監視• JavaScriptのデバッグ• JavaScriptのパフォーマンスチェック• Cookie, localStorageの確認・編集• レンダリングを含めたパフォーマンスチェック• YSlowのようなパフォーマンスチェックツール• JavaScriptのコマンドラインツール こちらでは、特に HTML5・CSS3で開発・勉強する際に是非利用していただきたい機能を紹介致します。 「HTML・CSSの確認と編集」でのメリット 具体的には、• サーバーアップロードなしで、HTML・CSSのデザインの確認ができる• フォントサイズやpaddingなど、px単位でサイズ感の確認ができる• CSSプロパティ・値の自動補完• カラーコードをカラーピッカーで指定ができる• 様々なデバイスサイズに合わせた形で、表示を確認できる。 使い方の説明• エレメンツパネルの使い方 エレメンツパネルではHTMLの編集とCSSの編集ができます。 HTMLの編集 HTMLのテキストやclassやID、属性などを編集することができます。 こちらではテキストを変更する流れを見ていきます。 その後サーバーへアップロードして初めて反映されます。 デベロッパーツールはあくまで、開発者の確認用に使用するものです。

次の