Developer tool


#1

I have a couple of problem about how to use ATOM editor, so I want to ask you two question.

Since I want to create a website with responsive design in ATOM editor, so I have used Chrome developer tool to confirm design on smart-phone and ipad (responsive or not) by pressing [command + option + I], but I don’t know why it doesn’t work good. When I saw the HTML preview, I saw the code preview[HTML CSS} in left side at the same time.You can see the situation in the below image.

this image was indicated that after I select the HTML preview screen, then open chrome developer by pressing three buttons, finally press smart-phone icon.

When I select the HTML preview screen, then do right-click, I can see the menu which is [Inspect], and {open in Dev-tools}.But it is not opened by chrome.Acorrding to certain website, it is by chromium.If I can change default developer tool, I wanna change chromium to chrome.Because in chromium developer tool, I can’t see smartphone icon, so I can’t confirm it works responsive or not.

①How can I confirm the HTML preview screen without code screen? i want to confirm with ATOM editor my website is responsive on smartphone .

②How can I change default developer tool system from chromium to chrome when I right-click on HTML preview screen?

This is the version of system I use.

ATOM ver1.14.3

Chrome Version 57.0.2987.110 (64-bit)

Mac os Sierra version10.12.3


#2

You should open the page in Chrome and check there. Atom’s dev tools are for debugging Atom itself.


#3

do you mean that we shouldn’t use Chrome developer tool in ATOM but we should use chrome developer tool in Chrome because Atom’s dev tools are for debugging Atom itself?
So If we confirm that responsive design work whether or not, we should confirm it in chrome after uploading to Internet by FTP software do you mean that?
Finally, we can’t make sure responsive design in ATOM?


#4

Correct. The Atom dev tools will not process your design correctly because of the rest of Atom getting in the way.

So If we confirm that responsive design work whether or not, we should confirm it in chrome after uploading to Internet by FTP software do you mean that?

There’s no need to upload it. Just open it in Chrome from your computer.

Finally, we can’t make sure responsive design in ATOM?

It can be done, but you would need a package that has that feature and I don’t know if it exists.