Find HTML source with Chrome Developer Tools


#1

Inspecting elements and trying out CSS changes non-destructively is a great thing, and I have just discovered how to edit generated HTML this way, but cannot locate the source HTML to make ‘REAL’ changes that stick.
Can someone tell me how to find the actual hard-coded HTML using Chrome Developer Tools?
Any help appreciated.


#2

You need to open the actual HTML file. :winky:

coothead


#3

Yes and maybe kind of sort of. Technically it’s whatever file is reponsible for the HTML that is sent to the browser. (i.e. in this case most likely a PHP theme template file and not an actual *.html file)

Instead of “inspect” try “view source”. Find the elements you’re interested in working with and find out what theme file they’re coming from. Depending on the theme it might take a while, I find looking for elements and their classes often helps.

If you don’t see what you’re looking for in view-source, then you’ll need to inspect and look for those elements in JavaScript files.


#4

Yes, finding how/where the HTML is being generated is the big question.
In this case, the element belongs to a form builder plugin, but searching through the plugin’s related files and folders doesn’t seem to help.
Inspect shows me exactly the div I’m looking for.
Please see this screenshot:


#5

Assuming the plugin has MO translation files you won’t find the code exactly as it is output. Try looking for the string “Yes, Please send me the Newsletter” / the attribute value “inbound-button-submit” using your text editor / IDE find feature.


#6

Thanks Mittineague,
I found this reference: https://cl.ly/edc38ad925e4
But I’m no php whiz.:tired_face:


#7

Between line 526 (the … </button>) and 527 (the </div>) is where you would put code for the <span> to be where it was in the dev tools screen capture.

In this plugin’s code

  • the $form variable holds what will eventually be output
  • the “.=” means append to (plus this) vs. overwrite
  • single quotes are enclosures
  • the "."s mean “and”
  • the “;” means “end”

But unless you want to have PHP code in the <span> you should be able to do something like

$form .= '<span style="whatever">Text Here</span>'; 

note however, that because this is hacking a source file, everytime the plugin is updated you will need to hack the file again. Not the best idea, but for something minimal like this as long as you need to do it only rarely you should be OK keeping a record of what you changed somewhere for future reference.

And a good idea, as always, save a backup just in case.


#8

Thanks, I did exactly that, however, I need to insert the following code to make the JS modal work. I put it inside a div as I wanted it under the submit button, but it broke the page. Is there a way I can encapsulate it into a function - may be the HTML I injected here broke the php syntax somehow.

Thanks for the advice about hacking the hard coded file, I understand to keep good records.

<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 220px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>



<!-- Trigger/Open The Modal -->
<div class="respect">
	<button id="myBtn" style="color: #A3A3A3; background-color: #FFF; border: none; margin-top: -2em; padding: 0; text-decoration: underline; font-size: 2em">We respect your privacy</button>
	</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>We will not sell or rent this information to anyone. We will use your information to respond to you, regarding the reason you contacted us. We will not share your information with any third party outside of our organization, other than as necessary to fulfil your request.</p>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>