I use this program called brackets, which lets you preview a live version of the website, however it doesn't show you how thick the margin, padding and border is, it just highlights an element when you click on it. I've never tried developing using devtools.

 

I'm wondering when do you actually use devtools? I see that you would use it for inspecting the source code, and various other things, my opinion is that you would use it when looking at other people's websites, and doing various tests on your own, except developing the code, as that would be for the text editing program on your pc. Brackets should have an indication of the sizes of padding, margin, border etc.

Why would you need an editor to give you a live preview? This is what a browser is for. You should be using the dev tools all the time. I suggest you do the dev-tools course on codeSchool and then it should be clear as night and day why they are useful.

 

There is no need for brackets or any editor to do this. This is not how modern development is done. You have your editor, you have a build process going on in the terminal doing linting, transpiling of code etc etc.. your browser open in another screen. use something like browsersync to automatically update the browser whenever you save to a file.

 

This is essentially the absolute minimum, myself and others on here have a lot more tasks running in the background that speed up development and ensure we release good quality bug-free code with unit testing and so on. But as a beginner do not concern yourself with this stuff yet.

Edited June 16, 201610 yr by rbrtsmith

So your saying that you write all your code into the devtools? Then copy and paste that code over to the text editor to save your work?

 

I thought you would develop all your code in the text editor, so you didn't have to move it over to the text editor from the devtools. When I first came to web development they said you should use the text editor. I find brackets as a good text editor so it speeds up production time.

On a more serious note, No I was not saying that at all. You don't put code into dev tools. You still use a text editor as normal.

 

Dev tools are in the browser and when you load your webpage / app / whatever in the browser you can then use dev tools to inspect it. Do the course on Codeschool and then you might grasp what they are and how they are a staple tool.

Edited June 17, 201610 yr by rbrtsmith

Well you have to work with the tools at your disposal. If you have the luxury of being able to run multiple displays then yabba-dabba-doo! However if you don't have the facility to do so you can't.

 

Brackets is a pretty good editor by all accounts and has been used to build several professional sites. It was the editor used to build the original Serif Affinity for Mac web site, although they have now moved to Atom.

 

https://affinity.serif.com/humans.txt

 

The base of many text editors is CodeMirror which is used in Brackets, Chrome and Firefox developer tools, Blue Griffon and many others.

 

Having a real time preview window is fine, in fact all it is doing is adding the facility to have a browser window open in a single display in the same way as having an editor open in one display and a browser open in another.

 

The choice of tools and working methods is totally up to the individual and the only thing that is of any real importance is that the finished product is of good quality, fit for purpose and accessible.

Normally you should have an idea of what the code you write is going to produce, but if you don't or are unsure you can simply test in devtools before you push to your code.

 

'devtools' being a web browser?

Well it's not exactly a browser, it's a tool in a web browser

Thanks for clearing that up for me as I'm a bit thick.

Anytime bud