Discover and read the best of Twitter Threads about #DevTools
Most recents (10)
🧵Thread! 1/8 : @jakecreps asked about what OSINT can be gathered using DevTools. One of my favorites is using Google Reviews to see what date a subject was in a location, file name used, upload time and date.
#OSINT #devtools #browser #sourcecode
#OSINT #devtools #browser #sourcecode
🧵2/8 : The techniques within this thread are to be used on Google Reviews, the intelligence gathered can't be seen or obtained without using Dev Tools, the first initial work on this came from @BanPangar, whom I assisted in the final steps for the different dates understanding.
🧵3/8 : Let's start with my chosen photo which is a cup of coffee. Using exiftool, we can see the photo was taken on the 27th of September 2022 at 17h57 +2 GMT. *I will change the file name to "ilovgoogle" 
Allez, on ne va pas finir la journée sans faire un petit fil de tweets sur les #DevTools quand même ? Et là, je vais aborder le thème de l'#Accessibilité !
L'#Accessibilité, vaste sujet que celui-ci. Rendre un site accessible n'est pas facile et les DevTools permettent de vérifier certains points, de relever certaines lacunes. Ne vous attendez pas à tout résoudre avec ces outils, mais ils sont toujours de bons conseils.
Au-delà de ces outils, vous pouvez avoir quelques réflexes pour améliorer l'accessibilité. Par exemple, pensez régulièrement à n'utiliser que votre clavier pour naviguer sur votre site. Vous pourriez ainsi vite trouver quelques failles.
Bonjour tout le monde. Hier je lançais quelques séries de tweets sur ma présentation à #DevoxxFR sur les Chrome #DevTools. Continuons donc sur notre lancée.
Nous allons aborder les outils "CSS Overview" et "Coverage"...
Nous allons aborder les outils "CSS Overview" et "Coverage"...
Tout d'abord, "Coverage" est un outil... de couverture de code (je suis sûr que vous ne vous en doutiez pas). Son principe est simple : instrumenter le code JS et CSS utilisé par le site pour voir quelle partie de ce code est utilisée, et quelle partie ne l'est pas.
C'est à prendre avec des pincettes : une page du site n'est pas nécessairement représentative du CSS et JS utilisés sur l'ensemble du site. Il serait plus judicieux d'aller sur toutes les pages en réalisant le plus d'actions possibles pour être plus confiant quant à ces mesures.
Allez, pour finir la journée, nouvelle petite série de tweets sur les #DevTools. Les 2 premières séries, où il est question de performances, se trouvent ici :
Cette fois-ci, je vais vous parler du "Recorder". Il est lui aussi un outil expérimental, apparu en Chrome 97. Il ne devrait donc pas manquer de nouvelles fonctionnalités dans les versions à venir de Chrome.
Son nom est assez explicite je pense, puisqu'il permet d'enregistrer un scénario utilisateur. On démarre un enregistrement, on navigue sur son site, et une fois terminé, on arrête l'enregistrement.
Voici la 2e série de tweets sur les #DevTools. Cette fois-ci, nous allons parler performances.
J'avais évoqué ce point sur la 1e série avec #Lighthouse qui permet de tacler certains points évidents (http/2, compression...) Mais ça ne suffit pas toujours.
J'avais évoqué ce point sur la 1e série avec #Lighthouse qui permet de tacler certains points évidents (http/2, compression...) Mais ça ne suffit pas toujours.
La première chose à laquelle on peut penser pour adresser des problèmes de performances, c'est d'utiliser l'outil "Performance" des DevTools #Logique
Cet outil est incroyablement complet. Oui, mais...
Cet outil est incroyablement complet. Oui, mais...
Il explique tout ce que fait le navigateur quand il affiche la page : temps passé au chargement des ressources, au scripting, à l'affichage. On peut y voir l'utilisation du CPU, de la mémoire. On a également le détail complet de la pile d'exécution du JavaScript du site.
Voici ma première partie sur les #DevTools de Chrome. Nous allons parler #Performances et #Lighthouse. En effet, l'une des utilités des DevTools, c'est de comprendre pourquoi son site ou sa page est lente, et voir ce que l'on peut faire pour y remédier...
Le premier outil est donc "Lighthouse". Il s'agit d'un analyseur de page web. Il faut noter que cet outil n'est pas propre aux Chrome DevTools. On le retrouve sur web.dev/measure/, et peut même s'intégrer dans une chaîne de CI: github.com/GoogleChrome/l…
L'exécution est très simple : on ouvre le panneau adéquat, et on lance l'analyse. On peut y préciser la nature des résultats souhaités : Performances, Accessibilité, Bonnes Pratiques, SEO ou PWA. On peut aussi cibler les mobiles en particulier.
Il y a bientôt un mois (déjà 😱!), je présentais mon Tools In Action sur les #DevTools à @DevoxxFR. Merci pour celles et ceux qui y ont assisté. Si vous voulez revoir la vidéo sur Youtube, c'est ici :
Je vais essayer de retracer les principales choses vues et démontrées dans ma présentation en quelques séries de tweets durant toute la semaine.
Trois petits rappels concernant ma présentation.
Trois petits rappels concernant ma présentation.
1. J'ai parlé des DevTools de Chrome (enfin Chromium) qui offrent beaucoup de fonctionnalités que les autres navigateurs n'ont pas. Cela ne signifie pas pour autant que ces derniers sont mal dotés.
#React was indeed in the spotlight last month, so we spared your time and collected the champions of #meetup videos in January. Which one is your favorite? 🥳
blog.meetupfeed.io/react-meetups-…
#programming #devtools #application
blog.meetupfeed.io/react-meetups-…
#programming #devtools #application
🔥1st: #Debugging a Non Reproducible Crash by @almouro
Hear the story of an epic struggle to vanquish a non reproducible #bug and learn what to do (and what not).
@ReactAdvanced
meetupfeed.io/talk/debugging…
Hear the story of an epic struggle to vanquish a non reproducible #bug and learn what to do (and what not).
@ReactAdvanced
meetupfeed.io/talk/debugging…
😎2nd: #React Performance with React Dev Tools by @yanaiEdri
@ReactNext
All of us are familiar with the react #devtool - how to select a component and observe the state and the props - but this tool also has the profiler tab.
meetupfeed.io/talk/yanai-edr…
@ReactNext
All of us are familiar with the react #devtool - how to select a component and observe the state and the props - but this tool also has the profiler tab.
meetupfeed.io/talk/yanai-edr…
Functionland is a team of 10+ strong and growing. We are incorporated in Toronto, Canada🍁 Our leadership team is scattered across the globe. We have been fortunate to have the backing of the Outlier Ventures Family. @jamie247 anyone! ? A thread 👇🧵
We are establishing an Association in Switzerland with the help of a great Canadian-Swiss-UK legal team. This association and current structure lay the groundwork for a DAO. Yes, yes, but what is Functionland building, what's on the roadmap🗺?
Why should you be paying attention to Functionland? Our organization is built upon first principles. We asked - how can all citizens be participants in #Web3 . How can non-technical people jump on board and start using dApps? How do we truly decentralize the decentralized web🌎
Need a high-resolution #screenshot of a whole web page? @ShayNehmad taught me how to take one, and I think you're going to like it [1/3]
The main idea is rendering the web page on a device with higher resolution. How?
#Devtools >> Toggle device mode >> Choose a 4K device >> Capture Full Size Screenshot.
Done. [2/3]
#Devtools >> Toggle device mode >> Choose a 4K device >> Capture Full Size Screenshot.
Done. [2/3]
Here are the resulted images, zoomed-in. On the left, obviously, is the one taken using dev-tools. Looks much more professional in presentations and slide decks :) [3/3]
