Chrome Web Inspector: Find and Replace

google-chrome google-chrome-devtools web-inspector

58,372

Solution 1

Nothing built in natively. There is a Search and Replace plugin that might help if you want to change text in the input fields.

Alternatively if you want to search and replace in the HTML you could Right Click → Edit as HTML the <body> in the DevTools Elements Panel select all the text with Ctrl+a, paste into your favourite editor, make the change there and paste it back.

Solution 2

Taken from this page at labnol.org

While you are on the web page, press Ctrl+Shift+J on Windows or Cmd+Opt+J on Mac to open the Console window inside Chrome Developer tools. Now enter the following commands to replace all occurrences of the word ABC with XYZ.

document.body.innerHTML = document.body.innerHTML.replace(/ABC/g, "XYZ")
document.head.innerHTML = document.head.innerHTML.replace(/ABC/g, "XYZ")

Solution 3

How to show redactions explicitly

Requested by @Cfomodz this my answer builds on the answer of @davem:

While you are on the web page, press Ctrl+Shift+J on Windows or Cmd+Opt+J on Mac to open the Console window inside Chrome Developer tools.

With the help of RegEx you can leave the amount of original characters or even better reduce it to a uniform length (to give even less clues about the original content) with a visible redaction symbol like the unicode "full block" █ (U+2588). For example to redact all email addresses in the body of the HTML use:

document.body.innerHTML = document.body.innerHTML.replace(/[A-Za-z.-]+@[A-Za-z.-]+/g, "███@██████.███")

Check out my RegEx demo to see & try this live.

58,372

Author by

Vyacheslav Pukhanov

Updated on July 09, 2022

Comments

Vyacheslav Pukhanov almost 2 years

Is there a "Find and Replace" function in Chrome Web Inspector? If it exists, where can I find it? I'm using Chrome 26.0.1410.64, if it matters.
Rostol over 8 years

I can only SEARCH using that, but not replace. maybe it was removed in later versions? using Version 49.0.2612.0 dev-m (64-bit)
paddotk over 7 years

Nice one. Not perfect though, since it only affects content in the body of the page.
porg almost 3 years

This is a great automation for people who need to replace sensitive information in screenshots for bug reports, software documentation, etc. Instead of blurring/blocking parts in screenshots with image editing software or already sophisticated "Inspect Element -> Edit inner HTML" with the browser's developer tools, this is the power workflow for those who need to find & replace numerous instances or numerous similar but different elements (i.e. all money transactions, prices, etc) which can be well handled with regular expressions. Thanks a lot!
porg almost 3 years

To show your redactions transparently you may use the unicode "full block" █ (U+2588). With the help of RegEx you can leave the amount of original characters, or reduce it to a uniform length (to give even less clues about the original content).
Cfomodz over 2 years

@porg Would you mind supplying how to do that via a dedicated answer?
porg over 2 years

@Cfomodz I don't think thats correct within the honor system of StackOverflow. davem answered and linked to the source from where s/he learned about it. My comment is merely a variant of it. But as the answer was set to edit-able I could add one paragraph with the example of how to replace with a RegEx to redaction symbols.
porg over 2 years

@davem Are you ok with adding this variation as the last paragraph to your answer?
porg over 2 years

To both: As the response may take some time and @Cfomodz would surely benefit from a quick answer I add it now. Feel free to remove again.
porg over 2 years

@Cfomodz I could not edit this answer here. Always got the error message "editing queue full". So eventually posted it into as a standalone answer which explicitly references davem 's answer. Thanks again davem on this occasion!
SO_fix_the_vote_sorting_bug about 2 years

Why has this answer not been deleted?