To create the best possible design experience, design in the browser itself. And not just one browser - all of them across all devices.
There is no better way to determine how something will look or function than actually testing it in that browser. By doing your design and development in the browser itself, you're doing this throughout the entire process.
This means you use a text editor (like Sublime or Atom) to manipulate code directly. With time and practice, you'll get faster and faster at this. Using libraries and frameworks built by others can help improve efficiency by preventing you from starting with nothing each time if used correctly. After you have made some projects, you'll then have a repository of older projects that you can also pull from.
But, of course, you can't write it using all browsers on all devices on the same time. So, at the beginning, decide what devices and browsers you choose to support (most the time these days you can support most all devices down to IE9 fairly easily) and write it using one of those. I recommend Chrome, but Firefox is a close second. Then, periodically through development, test using other browsers and devices - all of them that you own - and make sure that it still works correctly. By doing this periodically, it keeps the possible issues localized and gives you the ability to more quickly find the issue than if you waited until the end to do so.
As for how to design in the browser, the best way is to start rough and dirty. Don't make it pixel perfect. Get what you think the basic layout will be working (not pretty) and see if it actually works. If it doesn't work, scrap it and move on to your next idea. Once you know that it works and that it's the best way, then move onto making it look prettier and functional across all platforms. Using this method can save you a lot of time and heartbreak down the road due to cross browser issues.
I highly recommend using a mobile-first design approach, where you focus on the mobile version prior to the main version. That is not to say that it is more important than the full desktop version, just that designing the mobile version first makes the entire process easier because you don't have to worry about what parts to remove, you can just make use of the larger screen and better capability that desktops have, adding features instead of removing ones.
As you mentioned, using your browser's development tools greatly speeds up the process. You can live edit the styles and HTML which save a lot of back and forth between code and the live site. I recommend having the browser open next to your code so you can look and edit both as needed.
The biggest thing is practice. If you know exactly what you're doing and how you can do it, the process is fairly fast. There will always be problems when you're developing, but those are part of the process and to be included in any time estimate.
Hope it helped.