Best of DevTools — August 2022

1. 1
   Article

   Hashnode·4y

   I stopped using Visual Studio Code

   WebStorm is a paid product compared to VSC, which is free. It runs projects without hesitation and has no issue refactoring a widely used import.

   375

   97
2. 2
   Article

   Community Picks·4y

   My developer workflow using WSL, tmux and Neovim

   Microsoft made Windows Subsystem for Linux also known as WSL. I use Oh My Zsh to manage my zsh configuration, which makes it trivial to install and use plugins. To install Starship, Starship is a minimal, highly customizable and super fast prompt. Neovim is the best code editor for me because of its speed and ease of customization. All the configuration is written in Lua.

   131

   6
3. 3
   Article

   DEV·4y

   My Neovim setup for React, TypeScript, Tailwind CSS, etc

   Neovim is a cross-platform Markdown note-taking app. It's built with Electron for desktop and React Native for mobile platforms. The config files are now written in Lua.

   114

   5
4. 4
   Article

   Chrome Developers·4y

   Modern web debugging in Chrome DevTools

   Chrome DevTools has an extra setting enabled by default: Automatically add known third-party scripts to ignore list. With this setting enabled, DevTools hides any file or folder that a framework or build tool has marked as to ignore. This is a preview feature available in Chrome Canary from version 106.

   92

   4
5. 5
   Article

   Hashnode·4y

   A Complete Guide to Debugging Javascript in Chrome

   Chrome DevTools is a comprehensive developer toolkit with various web authoring and debugging tools. It is built directly into the Chrome browser and gives developers a deeper understanding of their applications. This article teaches you how to debug JavaScript code using the Chrome Dev tools.

   77
6. 6
   Article

   Hashnode·4y

   How to Debug Better with Chrome

   Google Chrome is probably the most widely used and popular web browser among developers. It has gradually become the preferred web browser for most developers to test and debug their websites and web apps. Google Chrome provides developers with the ability to debug most web applications with the built-in developer tools (aka DevTools) within the browser.

   70

   6
7. 7
   Article

   Product Hunt·4y

   Developer Toolbox - Access 15+ carefully constructed developer tools

   The Developer Toolbox is a collection of commonly used quick-tools assembled in one neat location.

   47

   4
8. 8
   Article

   Community Picks·4y

   Developer Experience Infrastructure (DXI)

   Developer Experience Infrastructure (DXI) is a new emerging infrastructure category sitting on top of API and cloud infrastructure. It enables any company to deliver world-class developer experiences by offloading the intricate details and complexities of developer experience to a new set of infrastructure components and services.

   35
9. 9
   Article

   Product Hunt·4y

   Sidekick - Like Chrome DevTools for your backend → now open source!

   Free Sidekick lets you collect stacks and dynamic logs from your applications without redeploying. Sidekick Open Source is here to make live debugging more accessible. Built for everyone who needs extra information from their running applications.

   34

   1
10. 10
    Article

    DevDojo·4y

    PhpStorm Plugins You Should Know

    PhpStorm plugin is an open-source Code Review and Static Code Analysis tool for PHP (aka inspections in JetBrains IDEs) It’s a must-have add-on to Php Storm to ensure high-quality coding.

    28

    3
11. 11
    Article

    Vercel·4y

    How we made the Vercel Dashboard twice as fast – Vercel

    Engineering Team took the Lighthouse score for our Dashboard from 51 to 94. Let’s review the techniques and strategies we used so you can make a data-driven impact on your application. Let's build a hook for detecting if an element is in the viewport. The 200vh element will push the <HeavyChildComponent /> below our viewport on page load.

    27
12. 12
    Article

    Hashnode·4y

    PhpStorm Plugins You Should Know

    Php Inspections (EA Extended) is an open-source Code Review and Static Code Analysis tool for PHP. GitLive is an absolute must to enhance PhpStorms’s built-in Git functionality with real-time features such as online presence for team members and instant merge conflict detection.

    23

    1
13. 13
    Article

    InfoWorld·4y

    Angular 15 promises greater simplicity

    Angular 15 is a planned upgrade to Google’s TypeScript framework for web development. Standalone component APIs move to stable status with the new release. Other capabilities planned for Angular 15 include Image directives for improved web page performance, with better scores for Core Web Vitals.

    19
14. 14
    Article

    Community Picks·4y

    How to find the Largest Contentful Paint element? A complete guide.

    Google introduced the Largest Contentful Paint metric (LCP) as part of their Core Web Vitals. LCP is the time it takes to load the so-called LCP element, the largest element in pixels.

    16

    1
15. 15
    Article

    InfoWorld·4y

    Angular 15 promises to simplify development

    Angular 15 is a planned upgrade to Google’s TypeScript framework for web development. Standalone components promise to help with organization, reduce boilerplate, and make applications easier to build. Other capabilities planned for Angular 15 include: Image directives for improved web page performance.

    14
16. 16
    Article

    Chrome Developers·4y

    DevTools Tips: How to inspect CSS grid

    Watch the video to learn how to toggle the grid overlay in the Elements panel and use it to: Visualize and inspect grid layouts. Use row and column numbers to refer to when placing grid items. Use line and area names and see them on the overlay if you have a lot of grid items.

    13