Google Chrome Developer Tools Crash Course

Traversy Media · 726K views · 2017 · 51:20

Open on YouTube

Testing, debugging & developer toolsWeb developmenttutorial

Why Stack Overflow recommends it

Stack Overflow users link it when a question shows the asker doesn't know how to open the browser console or network tab and read errors there.

Recommended by 4 people across 4 different months, 2017 to 2022.

What it is

A 51-minute crash course from Traversy Media on Google Chrome Developer Tools. It covers inspecting and editing HTML and CSS, console commands, the network tab, snippets, workspaces, browser storage and audits, using a sandbox theme project.

What people said

Recommends HMR · 2017-10 · Stack Overflow · on “Close modal in ajaxStop”

If you have pressed F12 in the browser and looked at the console you would probably have found an error there. This video [this video] might help you to figure out basic problems yourelf. I think printModelBank might throw an error, if the success or error functions throw an error then jQuery crashes and does not execute the ajaxStop handler: $(document) .ajaxStart(function () { console.log("open model"); }).ajaxStop(function () { console.log("close model"); }); $.ajax({ type: 'GET', url: "/none", data: {}, success: function (response) { console.log("success"); throw new Error("now stop won't execute"); }, error: function (jqXHR, textStatus, errorThrown) { console.log("error"); throw new Error("n

Recommends CherryDT · 2020-04 · Stack Overflow · on “Getting this message app.js:33 Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLButtonElement.addTodo”

Your selector is .todo-List , yet all your other class names don't use any upper-case characters, and your HTML shows class="todo-list" ( list , not List !) as well. So, I'd assume that this is a typo and should actually be todo-list with lower-case l , so you should change the line 4 to const todoList = document.querySelector('.todo-list') . The fact that you asked about the "message" of Cannot read property "appendChild" of null though sounds to me as if you didn't understand the error message. Please take the time to review this article [LINK] and take a quick squiz at how to use a debugger [this video] . Especially the latter is a tremendously important skill that will help you trace back tho

Recommends balexandre · 2021-06 · Stack Overflow · on “What can i do if something does not display correctly in HTML”

welcome to StackOverflow - this video [this video] it's an oldie, but very relevant to what you're trying to find out

Recommends dvicemuse · 2022-11 · Stack Overflow · on “Why doesn't it change the data in yajra datatable using Laravel and jQuery ajax?”

If you open up the browser developer console and look at the network tab... what is the result when you click the save button? If you're unfamiliar with the developer console watch this video: [this video]

Cites CherryDT · 2019-09 · Stack Overflow · on “JavaScript Unit Converter with 2 dropdown menus”

You have a typo: var madeSelection_1 = selecFrom[selectFrom.selectedIndex].value; This should be selectFrom and not selecFrom . Also, you need to set the value of the input field using convertedOuput.value = result instead of setting its innerHTML . (By the way, convertedOuput is also misspelled, should be convertedOutput , but it's consistent, so it should work anyway.) And finally, you are checking the selected units outside of the conversion button click handler, so they won't be updated when the user changes the selections in the dropdown. Move the corresponding lines which set value , convertedOuput and madeSelection_1 and madeSelection_2 into the Conversion function. (Explanation: Righ

Cites CherryDT · 2021-04 · Stack Overflow · on “How to get and display API response using AJAX”

It's not clear what the actual problem is that you are asking about, because you just described what you want to do and showed some code, but not what the actual issue with it is - what does happen compared to what you expect, is there an error, etc. I've edited your question so the code is wrapped in a snippet which can be executed, and from this I figured what the issues are - but next time it would be great if you could do that yourself and describe where exactly you run into a problem and how exactly this problem manifests itself. 1 : The API you are attempting to use doesn't allow accessing it from front-end JavaScript directly, because no CORS headers [LINK] are present. If you look in