Chrome DevTools Cheatsheet - Front-end Debugging Reference

SymptomAfter changing code and refreshing, the page still behaves the old way.

CauseThe resources were served from the browser cache, so the locally changed JS/CSS was not re-fetched.

FixOpen DevTools and check Disable cache in the Network panel, or verify again after a hard refresh with Ctrl+Shift+R.

SymptomStyles that only appear on hover are not visible in Elements, and the element cannot be picked either.

CauseThe hover state only takes effect when a real pointer hovers over it; a static DOM has no hover target to act on.

FixRight-click the node and use Force Element State to force :hover; or press Cmd+Shift+C to enter element selection mode and select it directly in Elements.

SymptomA selector in the Console returns null, even though the element clearly exists on the page.

CauseThe element is rendered asynchronously by a framework or hidden in shadow DOM, or the selector syntax is wrong; it may also be a different node with the same name.

FixFirst use $0 to point at the selected element and confirm its structure, then switch to $$("selector") to get the collection and check its length instead of guessing the selector.

SymptomThe Console reports that a variable is undefined, even though it was clearly defined before.

CauseThe context is recreated after a page refresh or navigation, so variables saved earlier with Store as global variable are invalidated along with the document.

FixAfter refreshing, save it again with Store as global variable, or re-reference the selected element directly with $0 in the Console.

SymptomThe API works on the page, but the Network panel shows a bunch of 404s or abnormal statuses.

CauseFilter conditions or cache state affected your observation, and the requests may actually come from a Service Worker rather than the network.

FixUse status-code:404 to filter and locate all failed requests, check Disable cache and replay; then go to Application → Service Workers to confirm whether a cache layer is intercepting them.

SymptomA large portion of the Performance recording is marked unknown, or the recording is very short.

CauseOther tabs were also active during the recording, or the recording window did not cover the operation that actually janks.

FixBefore recording, keep only the current tab visible, start recording from the step that triggers the problem, stop immediately when done, and locate the time-consuming function on the main thread in the Flame Chart.

SymptomAfter an element is removed by a script, the Styles panel still shows the styles it once had, leading you to think they are working.

CauseThe panel keeps the last state of the deleted node, but that node is no longer in the document, so the styles do not apply to any real element.

FixIn Elements, confirm whether the node still exists (if needed, Delete node and see whether it gets reinserted); for a removed node, its styles no longer represent the live behavior.

SymptomAfter editing Local Storage or Cookies, the page behavior does not change, as if nothing was saved.

CauseThe storage panel shows a snapshot of the current document state; writing must be triggered through the page code or manual editing, and some sites also validate same-origin and server-side state.

FixManually change the value, press Enter to write it back and refresh the page to confirm; if it still fails, run a write and then a read in the Console to tell whether the write failed or the logic simply does not read that key.