This State Changers meeting mainly focused on understanding how browsers store and process information using the console, with wrapping up discussions from the previous week. The team gave hands-on examples of using the console to access various components loaded into the browser memory, extract information, and run JavaScript to manipulate or investigate the state of the web page.
Key points discussed include: - Two notable tools utilized were ChartPick and LinkBink, which help identify what's happening within a site. - Information stored within the Window, the top-level element in a browser, can be accessed and examined using the console. - There was a cautionary note on the risks of storing private API keys within your front end, as they can get easily exposed, exemplified by a Google Maps API key found in the open. - Authentication tokens and other sensitive data are often stored in the Local Storage or Cookies, which can also be accessed and viewed through the console. - They discussed the differences in how sites approach storing such tokens, giving examples of Bubble's connection to Xano preferring Local Storage while others, like Wizd, favoring Cookies. - The console's versatility in handling JavaScript commands gives users a hands-on tool to understand and influence the page's activity. - Brief mention of platforms like WeWeb, however, direct discussions or utilization of other mentioned tools like Xano, FlutterFlow, Zapier, Make, Integromat, Outseta, Retool, Bubble, Adalo, AppGyver, AppSheet, Comnoco, Fastgen, Firebase, OAuth, Stripe, Twilio, Airtable, DraftBit, Javascript, Typescript, React, Vue.js, JSX, HTML, CSS, lambda, serverless, ScriptTag, OpenAI, and AI21 were not cited in this transcript. The latter part of the meeting was an open forum for team members to share insights, best practices, or questions generated from their experiences.
(Source: Deep Dive: Devtools Part 2 7/26/2023 )
