--- title: "Discussion on \"10 DevTools tricks to help you with CSS and UX design\" | Hashnode" description: "Discussion on \"10 DevTools tricks to help you with CSS and UX design\". Learn how to use the browser's DevTools for CSS and UX Design. Here are 10 tricks I found extremely useful for web development. Please read on." url: "https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d" --- [Feed](https://hashnode.com/feed) / Discussion # [10 DevTools tricks to help you with CSS and UX design](https://blog.greenroots.info/10-devtools-tricks-to-help-you-with-css-and-ux-design?utm_source=hashnode&utm_medium=feed) Learn how to use the browser's DevTools for CSS and UX Design. Here are 10 tricks I found extremely useful for web development. Please read on. Jun 9, 2021 · 10 min read · blog.greenroots.info Read the article - [#html5](https://hashnode.com/tag/html5) - [#css](https://hashnode.com/tag/css) - [#css3](https://hashnode.com/tag/css3) - [#html](https://hashnode.com/tag/html) ## Written by [Tapas Adhikary](https://hashnode.com/@atapas) @atapas · Bangalore [View profile](https://hashnode.com/@atapas) Educator @tapaScript | Founder CreoWis & ReactPlay - Writer - YouTuber - Open Source Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human ## Responses 11 Markdown supported · ⌘↵ to post [Arindam Majumder](https://hashnode.com/@Arindam1729) [Apr 19, 2024](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/662210ec184ae77e88dd3668) These are pretty cool things! Really loved this [Tapas Adhikary](https://hashnode.com/@atapas) [May 11, 2024](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/662210ec184ae77e88dd3668#reply-663eed797791c3e514c94310) Thank you, very much [Denial Brown](https://hashnode.com/@Denial701) [Aug 24, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/6124a778b115357df05f3412) Hi, thanks for your article! These are great tips. I think that it is these methods and tools that distinguish an ordinary freelancer from a [product design agency](https://cieden.com/) that knows how to do work on new trends. Optimized code, will always be useful, especially in marketing and SEO [Gaurav Singh](https://hashnode.com/@paanSinghCoder) [Jun 19, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60ce4cb637952431a1712b65) Hey Tapas - Interesting article. I have also created a nifty little NPM plugin for debugging JavaScript in mobile browsers. Its basically a console for mobile browsers. Any suggestions? [github.com/paanSinghCoder/outfrontjs](https://github.com/paanSinghCoder/outfrontjs) [Tapas Adhikary](https://hashnode.com/@atapas) [Jun 21, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60ce4cb637952431a1712b65#reply-60d02ebf07db7a50332c0762) Looks great [Gaurav Singh](https://hashnode.com/@paanSinghCoder) [Mark Viergutz](https://hashnode.com/@Marker) [Jun 13, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c638ba1679ed6f51a281e9) Great article. But I’d like to point out that the responsive mode isn’t always accurate. If you can find your device as a choice select it. Then look at the website on your device to compare the two. You can also download a free testing browser that’s quite accurate at Responsively.app. [Yogesh Chavan](https://hashnode.com/@myogeshchavan97) [Jun 13, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c5e06b1679ed6f51a27c1c) Great Tricks. Thanks for sharing [Tapas Adhikary](https://hashnode.com/@atapas) [Tapas Adhikary](https://hashnode.com/@atapas) [Jun 13, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c5e06b1679ed6f51a27c1c#reply-60c6082a4e04b16f76730b2e) Thank you, [Yogesh Chavan](https://hashnode.com/@myogeshchavan97). [Georgey V B](https://hashnode.com/@geobrodas) [Jun 13, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c56cbe1679ed6f51a275f6) Flawless 👌🏼 [Tapas Adhikary](https://hashnode.com/@atapas) [Jun 13, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c56cbe1679ed6f51a275f6#reply-60c56fa01679ed6f51a27619) Thank you! [Edidiong Asikpo (Didi)](https://hashnode.com/@didicodes) [Jun 11, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c34b3ba25fa357af83f67c) Wow, this article is so good that I had to bookmark it even after reading it. I will definitely come back to it from time to time. Thanks for sharing, [Tapas Adhikary](https://hashnode.com/@atapas). [Tapas Adhikary](https://hashnode.com/@atapas) [Jun 11, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c34b3ba25fa357af83f67c#reply-60c34c141e145957d5af6e9c) Thank you 🤩. I'm glad it was helpful. [Chris Bongers](https://hashnode.com/@dailydevtips) [Jun 10, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c1b4977c121d4151b3b5a1) Wow nice one Tapas! Wish I about that designMode before 😅👀 [Tapas Adhikary](https://hashnode.com/@atapas) [Jun 10, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c1b4977c121d4151b3b5a1#reply-60c1b938d2660e41762e4cf5) Thanks Chris. 🙂 [Victoria Lo](https://hashnode.com/@victoria) [Jun 10, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c172637c121d4151b3b24a) This is amazing! Now I can say goodbye to those color eyedropper extensions haha :D Thanks a lot [Tapas Adhikary](https://hashnode.com/@atapas)! Love it! [Tapas Adhikary](https://hashnode.com/@atapas) [Jun 10, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c172637c121d4151b3b24a#reply-60c1805f7c121d4151b3b2e4) Thank you [Victoria Lo](https://hashnode.com/@victoria). True, the inbuilt eyedropper works well. There are a few more interesting tools under experiments worth exploring. Have a great day. [Favourite Jome](https://hashnode.com/@Favourite) [Jun 9, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c0ab1c7c121d4151b3a56a) Learnt alot of new things I'll surely try it out. Thanks for sharing! [Tapas Adhikary](https://hashnode.com/@atapas) [Jun 9, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c0ab1c7c121d4151b3a56a#reply-60c0beb57c121d4151b3a7a0) Thanks [Favourite Jome](https://hashnode.com/@Favourite). Gald you found it helpful. [Savio Martin](https://hashnode.com/@saviomartin) [Jun 9, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c09e74d2660e41762e3ae3) Awesome read [Tapas Adhikary](https://hashnode.com/@atapas)! Well-written article bro, enjoyed every bit of it. Glad to find new tricks and tips, infact most of them was new to me. Thanks for the amazing content, Keep up the amazing work bro! 👏🙌 [Tapas Adhikary](https://hashnode.com/@atapas) [Jun 9, 2021](https://hashnode.com/posts/10-devtools-tricks-to-help-you-with-css-and-ux-design/60c07bb47c121d4151b3a00d/comment/60c09e74d2660e41762e3ae3#reply-60c0be897c121d4151b3a78c) Thanks [Savio Martin](https://hashnode.com/@saviomartin)! I use these often, so I thought of consolidating them in an article post. I'm glad you found it useful.