Today I noticed that the is discrepancy between the VSCode extension (called ‘Live Preview’) I’m using to see live when I build up a website, and the preview of Chrom Dev tools. I used the extension because everytime saving-open browser-refreshing is quite annoying and unpractical. Actually, the problem is that in Chrome I encountered more issues than I expected.
So, I need to change something.
Which is the best way to have a live preview, but accurate? Should I move to an online editor? In that case, which is the best one in terms of responsivness (because CodeBox seems not so cool in these terms)?
I was thinking about make the screen halved, with on the left VSCode and on the right Chrome, but I still have to refresh everytime.
Not sure if i have much to say to help here, but keep in mind that the VsCode live preview may not be taking into account default values for things from different browsers.
CSS Resets may help with this as they reset many values that a browser may try to change that you hadn’t accounted on being changed in the first place.
I also been concerned about how “true” my site is in terms of responsiveness either it be if resizing the window is accurate or if the f12 device toolbar is accurate.
Using both they both have different results at times.
So for the best way? It seems to be choosing from resizing to toolbar or even hosting on your own server to check your various mobile devices.
Hope this might help
Chrome DevTools is extremely widely used and is so popular that it’s nearly the standard, so any issues you’re seeing there are likely actual issues.
However you should note that using the “responsive” mode versus using the device emulator can yield different results. For best results, you should use the device emulator first, and then the responsive mode. You shouldn’t (and don’t need to) be resizing the Chrome window itself - that generally doesn’t work very well.
Also there’s something called the “user agent” that you may need to set, in order to accurately mimick a specific platform, since the device emulator won’t always work perfectly. You’ll sometimes need to Google “user agent strings” and set these appropriately to view a mobile site accurately.
