I am learning about websecurity particularly xss. Although I have done server side sanitization, I wanted to know upto what extent can client side sanitization protect me. So I am using DOMPurify for this (inside a function that is triggered upon pressing the button for a form submission) . And I did two experiments and wanted to clarify a doubt.
Experiment1:- I put the DOMPurify in a separate JS file and then linked it to my HTML Page. In this particular setup when I commented out the DOMPurify part in inspect element "sources" tab, Upon pressing the form submission button I was able to inject malicious input to server side.
Experiment2:- I put the DOMPurify in a script tag in my HTML Page. In this particular setup when I commented out the DOMPurify part using inspect element, the sanitization was still happening, why ?? And moreover I was able to edit the html page in elements tab only, not in sources tab.
EDIT:-
To summarize my question:- I feel that while trying to do an XSS attack using inspect element(in chrome dev tools), if you modify a script tag inside an HTML page, it will not work but if you modify javascript that is linked with the html page(using <script src="myjavascript.js"></script> ) the attack will work. I want to know why is the first attack unsuccessful and second attack successful ??