Skip to content

Instantly share code, notes, and snippets.

@jonathandavidlewis

jonathandavidlewis/finding_causal_source.md

Created July 30, 2018 23:17
Show Gist options
  • Save jonathandavidlewis/88db7a3a96c2785f1c95c76f0f51712d to your computer and use it in GitHub Desktop.
Save jonathandavidlewis/88db7a3a96c2785f1c95c76f0f51712d to your computer and use it in GitHub Desktop.
Download ZIP
A process for tracking down causal source files
Raw
finding_causal_source.md

Who made this DOM node?

A process for finding what source files ultimately generated specific DOM elements.

Scenario

You have been tasked with making changes to an existing page on your company website.

  • When the user clicks this image, instead of this image modal, have it load up a React component.

Initially, this seems pretty straightforward. Just find the code that renders this and swap out part of it.

Well... Depending on the number of methods by which you are generating DOM elements(external libraries, JSON, HTML, serverside templates, client side templates) It may become a little complicated.

Here's a process that's working well for me:

  1. copy a snippet from the rendered DOM right where you will need to edit. (a title for the modal that pops up, for example)
  • In this case, let's imagine you copied 'Large Waterbottle'.
  1. Full source search in chrome dev tools. (in Console, hitting ctrl + shift + F) Shows what file it came from (Finding text rendered in server templates this way and digging into server templates)
  2. Search network tab
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment