CODEWITHSUNDEEP
cssdeveloper-tools
jxramos
jxramos

Reputation: 8266

How to locate a css pattern from a loaded webpage and delete it

There's an Amazon.com page that does not render in print preview and shows up blank (it is the Online Return Center\Your Return Summary page). Through a lot of trial and error on a local saved copy of the page I found the culprit in some buggy linked stylesheet that was making everything hidden during a print preview...

@media print {
    body *, header {
        visibility: hidden;
    }
}

However back at the original website I'm struggling to locate that source from the live page in the developer tools. Where can I look up this sort of structure from the developer tools and override it so that the print preview renders as expected?

What I've tried

So far from the Elements view I'm searching for all link rel="stylesheet" hits and manually following all the hrefs to the css and searching for keyword print. That wound up working, but when I delete the link tag and go back to the page to print I still get the same blank page. Maybe it's a server side bug?

Here's the link found in the head section

<link rel="stylesheet" href="https://images-na.ssl-images-amazon.com/images/I/01WIasbg6mL._RC|014yivy0BxL.css_.css?AUIClients/PREXWebAppBuzzAssets-confirmationPage">

What can I do locally to remove this bad css?

Here's the preview I'm talking about blank print preview page

Upvotes: 1

Views: 65

Answers (2)

D M
D M

Reputation: 7179

From the comments on the author's answer:

For a single remove-and-print, you could try to force Chrome to use the screen styles even when it would normally use print by reversing the steps in the linked answer.

If using Chrome Open up developer tools, click on the 3 vertical dots in the top right corner, go to More tools --> Rendering revealing the Rendering tools dev tool page

Then locate the Emulate CSS media type list box and select Screen. Trigger a print and review the print preview and inspect if the content renders as expected and proceed to print.

selecting css media type emulation for screen

Upvotes: 1

jxramos
jxramos

Reputation: 8266

Oh wait, I'm not sure what I failed to do previously but when I just right clicked the link tag in the Elements view of the developer tools and selected Delete element the preview now works as expected. That wound up deleting the entire effects of the whole stylesheet, I wonder if there's a more nimble way to just cut out that select @media print portion

Upvotes: 0

Related Questions