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
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
今、私のAtomでも確認してみましたが、同じようにAtomのデザインのコードが表示されました。
AtomはElectronというNode.jsとchromiunを使ってできたソフトなのでコードが表示されることはおかしくはないのですが、そのPreviewというものはAtomのパッケージをお使いでしょうか？
自分はChromeとAtomを使い、保存しながら確認しているためその機能は使用したことがなく、、、
もしもパッケージを利用し表示されているのでしたらデベロッパーツールをエディタ上で使用するのは難しいと思われます。
Chromeなどを使いそちらでデベロッパーツールを開きレスポンシブのところを変えることで各端末の大きさで表示することが出来ます。
マークがないという現象はあまり聞いたことがないためCtrl+Shift+Mでこのメニューが表示されますでしょうか。
もしも出来ないのであればそれが仕様だと思われます。
AtomのDevtoolとパッケージを利用してパッケージのページのソースを表示することは出来ますが
Web自体を確認したいのであればChromeなどで確認し、ChromeのDevtoolで上記のように端末のサイズを
変更されたほうがすぐに確認が出来るかと・・・。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2017/03/19 22:55 編集
{自分はChromeとAtomを使い、保存しながら確認しているためその機能は使用したこ とがなく、、、 }とご回答いただいたと思うのですが、
それは、ATOMのpackageの自動的にFTP環境にアップロードするものを利用して、Chromeで自分のサイトを開き、developertoolを使うということでよろしいでしょうか？
もしこれ以外のやり方でされている場合、ご回答いただけると幸いです。
よろしくお願いします。
2017/03/19 23:13 編集
わざわざFTPにあげなくても・・・HTMLをポイって普通に起動したChromeにドラッグ&ドロップすれば
2017/03/19 23:17
2017/03/20 13:07
これで、しばらく悩んでいた問題が解決できて、非常に嬉しいです。
2017/03/20 21:51
多分このパッケージを使用すればタブを分けたり幅を変えたりなどができたはずです
https://atom.io/packages/maximize-panes
2017/03/22 13:59 編集