Whatever HTML element you click on in the left panel, the CSS styles are shown in the right panel. The right pane of the window also has a set of tabs, which defaults to Styles. The left window has a set of tabs, which defaults to Elements, which is the HTML of the page the browser is looking at. In the main Dev Tools window, you’ll see a split-screen window, which you can drag to adjust. There’s one last thing we need to do to emulate print styles in the browser. In the top-left corner of that window, there should be a drop-down menu for selecting what device and width you wish to emulate. You should see a grid - with the page the browser is on - appear in another window behind the main Dev Tools window. In the top-left corner of the Dev Tools window, you’ll see a icon for toggling device emulation on and off. There are a ton of options here, but let’s look at how we emulate print styles for debugging. To access Chrome Developer Tools, right-click a page and select Inspect Element. The Chrome browser has a nifty feature in it’s Developer Tools where you can emulate different devices, or even print styles. Emulating Print Styles In Chrome Developer Tools In order to get initial print styles calibrated for each “view” of the page content, I was using Chrome, because of it’s ability to adjust print styles while still in the browser. On the pages they will need to print, the main content is dynamically generated - meaning it is written to the web page after the page initially loads. The BackstoryĪ client project I’ve been working on has one component that is reliant on printing pages for regular internal distribution. The way Angular renders the pages is not compatible with the method for previewing print styles described below. Note: If you have an Angular application, you will need to seek another solution. Turns out the root of your problems may end up being a detail you never even realized might affect print styles. If you’ve ever tried to debug print styles in Chrome, and kept wondering why the print preview looked totally different than what you were seeing in Chrome Developer Tools, you were exactly where I was earlier this week. This one’s for the web developers in the house. Website Facebook Twitter LinkedIn Instagram YouTube
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |