Getting Around Website Paywalls with Devtools Alone
While opening up dev tools in any browser and removing a paywall div is easy, I ever knew that there was an easy way to actually view the rest of the content on the page.
The trick is that you find the content in the DOM you are looking for. This can be done in a number of ways. In the video I resized the page and the content comes into view. Then I see there are multiple divs below with more content. Normally I woulnd't know how to easily view this content. However Chrome has a nice feature where if you right click on a div and click "scroll into view" it will scroll down to that div.
So the first step is to delete the paywall div, then the second step is to find the divs with the text your interested in. Then you right click on that div and click scroll into view.
Usually on these sites, there'll be an `overflow: hidden` element that's holding all the content. If you can find and disable that CSS line, it'll work as normal. Or just save it to the Wayback Machine and read it through that.
reply
I looked into it and I believe the above could be done with the following:
$x("//div[contains(@style,'overflow: hidden')]")
Not sure if this is exactly right, but something like this should obviate the need to find the element holding all the content.
* { overflow: visible !important; }
In the case of Washington Post it just has a "position: fixed" style on the <body> element. That's usually the case with most of these scroll locking sites, one of the root parent elements will have some CSS style that you can click off.
I just use Firefox's reader view. Does the same with just a click. If it doesn't work, just refresh in reader view and it should load properly.
reply