There is a lot of situations where we need either to debug smth, or write JS right away inside Chrome Terminal, all nuggets from that type of situations are collected here
Missing component: content/content/introheader
WKHTMLPDF hacks
We use wkhtmlpdf a lot in a bunch of projects, below are some discoveries ofc powered by searching on StackOverflow
Reminder: WKHTMLPDF ignore the media queries for print because it's actually not printing
Below some nice gems on the topic
Quickly generate Unique hash
Sometimes we need UID and this tool would help to come up with one quickly https://hashids.org/
Convert Object into array of strings
var objectEntries = Object.entries(experienceObject);
// Result is: 0: [
// ["name", "Raymon"],
// ["title", "Lead Frontend/JavaScript Developer"],
// ["yearsExperience", 8],
// ]Debug which event listener is attached to a DOM element
getEventListeners($0)Will get all event listeners on the element focused in the Chrome Dev Tools currently
Scroll Page to Element
Often used to navigate to the top of the page or from table of contents to an element
el = document.getElementById('your-el-id');
var rect = el.getBoundingClientRect ();
window. scrollTo(rect.x, rect.y)Named Console.logs
See example below
console.groupCollapsed('Product list view tracked - preview')
console. log('gtag', 'event', 'page_view', google_page_view)
console. log ('fbq',"track","ViewContent' fb_pixel_track)
console.groupEnd()Output objects as a Table using Console.logs
console.table(Object)Example:
Trigger click on <A> element
.click() works fine on buttons but we sometimes need to use smth similar on <a>
Below wisdom comes from - https://gomakethings.com/how-to-simulate-a-click-event-with-javascript/ this place contains a lot more interesting and useful gems
Often we use Chat GPT to write some code snippets for us, so below are some things we were used it to help us with:
Custom variable in the className in the JSX
Vanilla JS that captures screenshot of a DOM node
Get a node of an element user right clicked on
