Not every HTTP request sends CORS preflight.
For simple requests it is possible that preflight is not being sent at all.
Details are listed on MDN CORS documentation
In short request must be performed
with one of the methods below:
GET
HEAD
POST
with following additional headers (apart from standar user-agent ones)
Accept
Accept-Language
Content-Language
Content-Type
There are more limitations so I recommend reading through MDN docs
In case anybody wondering why native <select> dropdown opens in random directions (sometimes upwards, sometimes downwards) it just opens in the way so currently selected option is already on the cursor level.
It means when first option is selected, dropdown opens downwards, when last - upwards. And somewhere in the middle when some other option is selected. See image:
Debugging code in javascript might be tricky sometimes. Especially when we want to log into console events that triggers page reload. But we can preserve logs. For example in Chrome we go into console -> console settings (this lower one button) -> preserve log
Chrome dev tools will show all logs and only inform us by logging 
info that it changed page.
When for some reason the application causes the browser to freeze, it is problematic to find the root cause because the devtools also stop responding.
Here’s one way to quickly find the issue.
Likely the application will be stopped during execution of the problematic script. Now by using of stepping and checking callstack you can find the problematic piece of code.
When we open dev tools on chrome and press CMD + SHIFT + P we can type screenshot and choose Capture full size screenshot that will download whole page in image for us.
What CSS overview is: new experimental feature, gives overview of CSS used on a site: what colors are used, different fonts and font-sizes, media-queries and lists some unused declarations (declaration that is in CSS but doesn’t affect the element in any way).
To enable this feature in Chrome:
CSS Overview
How to take an accurate screenshot of an element in Chrome:
header.
Run command menu with CMD + Shift + P.
Screenshot and choose Capture node screenshot
This is the result:
When using tools like Auth0 or other services using external cookies, make sure to have “Block third-party cookies” setting disabled in your browser.
Here’s how to do it in chrome:
chrome://settings
The reason I post it on TIL is that there were no issues apparently, the error appeared in URL and it was pretty hard to debug it. Just a heads up for you to check it whenever you are dealing with third-party services.
If you want to console.log tabular data into your JS console, you can use console.table to do it. It will display your objects into convenient and easy-to-read table to make your life easier.
There’s this cool feature in JS console (works in Chrome and Firefox) you can use if you want to log a lot of information, but you’re afraid of JS console getting too crowded. See example:
console.groupCollapsed("types of components");
console.log(typeof ComponentOne);
console.log(typeof ComponentTwo);
console.log(typeof ComponentThree);
console.groupEnd();
To quickly change format of color in Chrome Dev Tools, just hold shift and click the color badge (colored square)
If you don’t wanna play with inspecting “Break on” option. You can use browser debugger.
Only what you need to do is run the console. Chrome / Firefox - F12 or by hand.
Then, you can start focusing/ hovering/ anything that you wanna catch and then you need to press F8 (the same for Chrome and Firefox).
The console will break your js code and then you can easily inspect what you want. Easy, right? :)
To share messages between browser tabs, you can use BroadcastChannel API. See screenshot below for example:
The browser has a built-in mode where we can easily edit the whole content. It can be useful for prototyping or quick changes during the call.
document.designMode = "on";More information: MDN
Recently we were able only to use breakpoints to inspect code execution in the production application. But if the code in which we put breakpoint is triggered multiple times we have to resume the execution. To prevent that, we can use conditional breakpoints
In cases when we do not want to break the execution of the code but just log some value we can use logpoints
Whenever you need to freeze your website and check its state, you can trigger debugger at any given point.
Let’s say you want to check which classes are passed when element is hovered - move your mouse over it and trigger debugger. The page will freeze and you can browse the dom tree freely.
According to Google Chrome’s DevTools documentation:
Pause script execution (if currently running) or resume (if currently paused)
You need to have your DevTools opened
MacOs: F8 or Command+\
Windows/Linux: F8 or Control+\
It’s impossible to right-click an element that is dynamically injected into DOM, as the click causes it to disappear:
The solution is to toggle a debugger on a parent element:
This way you are able to modify it:
