ATOMのdeveloper tool

ATOMエディタの利用方法でわからないことがあるため
この場を借りて、2点質問させていただきます。

①レスポンシブデザイン対応のwebサイトを作りたいため、ATOMを使う際に、Chromeのdeveloperツールを使い、スマホ画面の場合を確認しようとしたのですが、なぜかdeveloperツールのpreview画面にatomのhtmlやcssのコードが写り込んでしまったりして、うまく利用することができません。
下の画像は、html preview画面をs選択状態で、chromeのdeveloper toolを開き、スマホのアイコンを押したものになります。左側にコードの編集画面が写っていることが確認できると思います。

②html preview画面を右クリックすると、検証(inspect)や、open in Dev.toolなど出るのですが、なぜかそれらを実行するとそれらは、chromeのdeveloper toolではなく、chromiumのdeveloper tool(webサイトのある記事曰く)でした。
このchromiunのdeveloper toolは、スマホ用の画面を確認できないと思われるため、できれば右クリックした際に、検証を選択した際に、chromeのdeveloper toolが開くように設定したいです。下の画像は、chromiunのdeveloper toolを開いた時の様子です。chromeのdeveloper toolと違って、スマホ用のアイコンが見当たらないのが確認できると思います。

①どうすればATOMで編集しつつ、chromeのdeveloper toolを使い、レスポンシブになってるのか確認できるでしょうか？

②どうすれば、HTMLpreview画面で右クリックした時に現れる検証でchromeのdeveloper toolが自動的に開くようにできるでしょうか？

どなたかこの2点の質問がわかるかた、ご教授いただけないでしょうか？

大変恐縮ですが、宜しくお願いします。

下記が利用しているもののversionになります。

ATOM ver1.14.3

Chrome Version 57.0.2987.110 (64-bit)

Mac os Sierra version10.12.3

行動規範の内容に同意します

回答1件

ベストアンサー

今、私のAtomでも確認してみましたが、同じようにAtomのデザインのコードが表示されました。
AtomはElectronというNode.jsとchromiunを使ってできたソフトなのでコードが表示されることはおかしくはないのですが、そのPreviewというものはAtomのパッケージをお使いでしょうか？
自分はChromeとAtomを使い、保存しながら確認しているためその機能は使用したことがなく、、、
もしもパッケージを利用し表示されているのでしたらデベロッパーツールをエディタ上で使用するのは難しいと思われます。
Chromeなどを使いそちらでデベロッパーツールを開きレスポンシブのところを変えることで各端末の大きさで表示することが出来ます。

マークがないという現象はあまり聞いたことがないためCtrl+Shift+Mでこのメニューが表示されますでしょうか。
もしも出来ないのであればそれが仕様だと思われます。
AtomのDevtoolとパッケージを利用してパッケージのページのソースを表示することは出来ますが
Web自体を確認したいのであればChromeなどで確認し、ChromeのDevtoolで上記のように端末のサイズを
変更されたほうがすぐに確認が出来るかと・・・。

投稿2017/03/19 12:38

tomopro

総合スコア57

revoiot

2017/03/19 13:58 編集

大変貴重なご回答いただきありがとうございます。 {自分はChromeとAtomを使い、保存しながら確認しているためその機能は使用したことがなく、、、 }とご回答いただいたと思うのですが、それは、ATOMのpackageの自動的にFTP環境にアップロードするものを利用して、Chromeで自分のサイトを開き、developertoolを使うということでよろしいでしょうか？もしこれ以外のやり方でされている場合、ご回答いただけると幸いです。よろしくお願いします。