IronPDF Tutorials Debug HTML with Chrome How to Debug HTML in Chrome to Create Pixel Perfect PDFs Chaknith Bin Updated:June 22, 2025 As the developers of IronPDF, we understand that PDF documents made by IronPDF not only need to look perfect, but also need to look exactly how our customers expect them to. To make your PDFs look pixel perfect, you will need to develop excellent HTML templates or work with a Web Developer to do it for you. IronPDF has the options to render your PDFs to be Pixel Perfect to your HTML and appear identical to how they appear in Chrome because of our Chrome Renderer. What is IronPDF's Chrome Renderer? It makes IronPDF unique from other .NET PDF Libraries IronPDF is distinct in the market as it utilizes the Google Chromium Renderer, meaning the HTML you see in Chrome browsers will look exactly the same as what you see in our PDFs. In this tutorial, we will walk you through some settings you will need to apply in Chrome and in IronPDF to achieve this. To be clear, many claimed "HTML to PDF" technologies implemented by competitors do not comply with W3C standards, or even support HTML5, CSS3, or JavaScript, and use underlying renderers such as wkhtmltopdf. IronPDF compared with Competitors IronPDF Download PDF Vanilla Chrome Download PDF Aspose.PDF Download PDF iText Download PDF wkhtmltopdf Download PDF To see a full list of comparisons with other products, see our blog. [p Features] | IronPDF's Chrome Renderer | Aspose vs IronPDF | iText vs IronPDF IronPDF's Optimized Chrome Renderer is better than Chrome Two examples of IronPDF surpassing Chrome itself. Buttons and Text that would otherwise be split onto two pages with Chrome remain intact with IronPDF. Example of Buttons and Text being cut off in Chrome Another Example of Text being cut off in Chrome Why to use HTML to PDF? Developers love HTML to PDF because it delivers predictable results that match existing web branding. Design is implemented using well-documented standardized HTML, CSS, and JavaScript technologies. The layout and design of the output matches the website exactly. Web developers can focus on designing with absolute precision. .NET developers can focus on application logic rather than layout. Back-end developers can delegate layout and design tasks to web designers. 1. Decide to use CSS Media Type Print or Screen IronPDF's renderer has two media rendering options: Print (default) and Screen. For a visual side-by-side comparison please see the end of this tutorial under the "Comparison of Screen and Print Example" section. CssMediaType.Print is the default rendering option that optimizes your HTML for general use with a printer. This means that some background images, icons, and other ink-heavy elements on the page may render differently or be omitted. This option is good for documents without background images and is the default print-preview. CssMediaType.Screen is the rendering option that will allow your PDFs to look exactly how they appear within Chrome on your screen. You will need to set up some options within your Chrome browser to enable the print-preview to look exactly how IronPDF will render for HTML debugging purposes. :path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs // Pixel Perfect HTML Formatting Settings IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer(); renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen ' Pixel Perfect HTML Formatting Settings Dim renderer As New IronPdf.ChromePdfRenderer() renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or Screen $vbLabelText $csharpLabel Repeating Table Headers If you have HTML containing a table that will span more than one page, you would probably like the Table Headers to repeat on each PDF page. In this case, you can only use the Print CssMediaType. Using Screen instructs Chrome to only print the headers once. Comparison of Screen and Print Example Many images and icons will not load in Print mode which will load in Screen mode: 2. Set up Chrome IronPDF proudly utilizes a Chrome Rendering Engine. Follow these steps for IronPDF to render your HTML exactly as you see it within Chrome. These are the few steps that need to be done beforehand within Chrome to achieve this. To render Pixel Perfect PDFs that include all images, icons, and backgrounds that are usually omitted when in printing format, be sure to use the Screen CSS Media option. 2a. Open DevTools and set Enable Emulate CSS media to Screen/Print in Chrome To do this, within Chrome open DevTools. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu. Start typing rendering, select Show Rendering, and press Enter. DevTools displays the Rendering tab at the bottom of your DevTools window. More help Navigate down and find the drop-down for Emulate CSS media and choose the option Screen or Print. If you are on a webpage, you may need to reload (Ctrl+R) for settings to take effect. Print Screen 2b. Open the Print Preview window (Ctrl+P on Windows) You may need to change the paper size and enable 'printing background images' in the Chrome Print dialog in order to get an accurate display. 2c. Set the correct Print Preview settings Please choose the Paper Size you are using in your IronPDF project, such as A4, or Letter. Under the Margins drop-down select Custom and set all four sides to (1") one inch margin. Enable the Background Graphics checkbox. Ensure you set your Layout to Landscape if you intend to output a landscape document. And that is all. You can now debug your HTML and use the print preview to see exactly how IronPDF will render your layout. 3. Set up IronPDF 3a. Set the CSS Media Type in IronPDF In order to match the webpage design with 100% precision, we must choose the same CSS Media Type that we set in Chrome in our code. Recall that PdfCssMediaType.Screen includes backgrounds, and larger images that may be omitted in the PdfCssMediaType.Print format which is the default and designed for printers to save ink. :path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs // Example using PdfCssMediaType.Screen IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer(); renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print renderer.RenderingOptions.PrintHtmlBackgrounds = true; ' Example using PdfCssMediaType.Screen Dim renderer As New IronPdf.ChromePdfRenderer() renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print renderer.RenderingOptions.PrintHtmlBackgrounds = True $vbLabelText $csharpLabel 3b. Setting Render Delay and Render Timeout appropriately IronPDF's default rendering timeout is 60 seconds. Anything that takes longer than this to process will not render without editing the rendering options. To override the default settings, you will need to adjust the RenderingOptions.Timeout option. Keep in mind that having no timeout set or having a render delay longer than your set timeout will produce an "Unable to Render PDF" Exception. So if you are encountering this error you may need to increase these values. :path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-3.cs // Example of setting Timeout and RenderDelay options renderer.RenderingOptions.Timeout = 90; // seconds (default is 60) renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds IRON VB CONVERTER ERROR developers@ironsoftware.com $vbLabelText $csharpLabel RenderDelay and JavaScript (Code Example) RenderDelay (API Reference) Timeout (API Reference) Ready to see what else you can do? Check out our tutorial page here: Addtional Features Frequently Asked Questions What is the Chrome Renderer? IronPDF uses the Google Chromium Renderer, ensuring that the HTML displayed in Chrome browsers looks identical to the PDFs created by IronPDF. How does it compare with competitors? IronPDF provides pixel-perfect rendering of HTML to PDF using a Chrome Renderer, unlike many competitors who do not fully support HTML5, CSS3, or JavaScript. Why should developers use HTML to PDF? HTML to PDF provides predictable results that match existing web branding, allowing developers to focus on application logic while web designers handle layout and design. What are the CSS Media Types available? IronPDF offers 'Print' and 'Screen' CSS Media Types. 'Print' is the default and suitable for documents without backgrounds, while 'Screen' ensures the PDF looks exactly like it does on the screen. How can I set up Chrome to render Pixel Perfect PDFs? Open DevTools, enable Emulate CSS media to Screen/Print, and adjust print preview settings to ensure accurate PDF rendering. How do I set the CSS Media Type? To match the webpage design, choose the same CSS Media Type in IronPDF as set in Chrome, either 'Screen' or 'Print'. What should I do if I encounter a 'Unable to Render PDF' Exception? If you encounter this error, you may need to increase the Render Delay or Render Timeout settings within IronPDF's rendering options. Chaknith Bin Chat with engineering team now Software Engineer Chaknith works on IronXL and IronBarcode. He has deep expertise in C# and .NET, helping improve the software and support customers. His insights from user interactions contribute to better products, documentation, and overall experience. Ready to Get Started? Free NuGet Download Total downloads: 14,631,247 View Licenses