質問: ATOMエディタの利用方法でわからないことがあるため この場を借りて、2点質問させていただきます。 1レスポンシブデザイン対応のwebサイトを作りたいため、ATOMを使う際に、Chromeのdeveloperツールを使い、スマホ画面の場合を確認しようとしたのですが、なぜかdeveloperツールのpreview画面にatomのhtmlやcssのコードが写り込んでしまったりして、うまく利用することができません。 下の画像は、html preview画面をs選択状態で、chromeのdeveloper toolを開き、スマホのアイコンを押したものになります。左側にコードの編集画面が写っていることが確認できると思います。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/d9d2c462b739b9bfd0e4296d697eeb3c.png) 2html 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と違って、スマホ用のアイコンが見当たらないのが確認できると思います。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/7a18fa3ad424b362ae4fd0abfa7cc8f7.png) 1どうすればATOMで編集しつつ、chromeのdeveloper toolを使い、レスポンシブになってるのか確認できるでしょうか? 2どうすれば、HTMLpreview画面で右クリックした時に現れる検証でchromeのdeveloper toolが自動的に開くようにできるでしょうか? どなたかこの2点の質問がわかるかた、ご教授いただけないでしょうか? 大変恐縮ですが、宜しくお願いします。 下記が利用しているもののversionになります。 ATOM ver1.14.3 Chrome Version 57.0.2987.110 (64-bit) Mac os Sierra version10.12.3
回答: 今、私のAtomでも確認してみましたが、同じようにAtomのデザインのコードが表示されました。 AtomはElectronというNode.jsとchromiunを使ってできたソフトなのでコードが表示されることはおかしくはないのですが、そのPreviewというものはAtomのパッケージをお使いでしょうか? 自分はChromeとAtomを使い、保存しながら確認しているためその機能は使用したことがなく、、、 もしもパッケージを利用し表示されているのでしたらデベロッパーツールをエディタ上で使用するのは難しいと思われます。 Chromeなどを使いそちらでデベロッパーツールを開きレスポンシブのところを変えることで各端末の大きさで表示することが出来ます。 !イメージ説明 マークがないという現象はあまり聞いたことがないためCtrl+Shift+Mでこのメニューが表示されますでしょうか。 もしも出来ないのであればそれが仕様だと思われます。 AtomのDevtoolとパッケージを利用してパッケージのページのソースを表示することは出来ますが Web自体を確認したいのであればChromeなどで確認し、ChromeのDevtoolで上記のように端末のサイズを 変更されたほうがすぐに確認が出来るかと・・・。