I was going to write a collection of Web development tools, but I didn’t feel like writing it, so I made a list of all the tools I could use.

If these tools can be used in the beginning, I believe that the work efficiency can be greatly improved, so at least for the novice is more beneficial. And one of the major aspects of moving from junior to senior developer is tweaking tools, simplifying task management, communicating seamlessly with other team members, and building integration between the tools used.

So I’ve put together a list of 60 tools you can use.

I summarize it from the following aspects:

  • 1) Chrome extension
  • 2) VS code extension
  • 3) UX design
  • 4) Web development
  • 5) Programming tools without code
  • 6) Database tools
  • 7) Miscellaneous

It’s really convenient to launch an online tool collection before you start.

  • Online tools – Programmer’s toolbox

1. Chrome extension

  • CssViewer – CssViewer is a Google Chrome plugin that allows users to quickly view the CSS properties of current web elements.
  • WhatFont – Find the fonts used by your favorite websites and apply them to your own projects.
  • – Helps to view div contours and modify CSS.
  • Colorzilla – Copies the colors from the site directly to the clipboard so it doesn’t take too much time trying to get the right RGBA combination.
  • CSS Peeper – Check CSS objects, colors, and Asset styles hidden on the Web in the simplest way possible.
  • Wappalyzer – Helps to see what technology is being used on a site, such as what framework the site uses or what services are hosted.
  • React Dev Tools – Used to debug React applications, only useful when writing React applications.
  • Redux Dev Tools – Used to debug applications using Redux, only useful if Redux is implemented in the application.
  • JSON Formatter – Makes JSON look cleaner.
  • Vimeo Repeat and Speed – Accelerate Vimeo videos.

2.VS code extension

  • Automatic Renaming of tags – When renaming an HTML/XML tag, matching HTML/XML tags are automatically renamed. In theory, efficiency is increased by a factor of two.
  • HTML CSS support – CSS supports HTML documents. Useful for getting some concise syntax highlighting and code suggestions.
  • HTML code snippets – useful code snippets, a handy tool to save time.
  • Babel ES6/ES7 – If you are using Babel, it is easier to differentiate the content in your code.
  • Colorizer – Adds colors to parentheses to facilitate block visualization.
  • ESLint – Integrate ESLint into Visual Studio code.
  • Guides – Adds various indent Guides.
  • Auto – Open source text editor created by Github. Fully featured, built-in package manager, intelligent auto-complete, faster coding.
  • Code Spell Checker – Spell Checker.
  • VSCode-Icons – Adds Icons to the file tree.
  • Prettier – An automatic code formatter.
  • Git Lens – Check when and by whom your code was changed

3. The UX design

  • Marvel – Instant generation of design specifications and connection integration.
  • Proto. IO – especially useful for UX designers who want to create animated apps.
  • INVISION – a prototyping and workflow platform ideal for collaboration between the front end and designers. Designers can upload a series of screens to a project.
  • Principle – Works offline, interactive prototypes can be easily converted to GIFs or videos.
  • Whimsical
  • Zeplin
  • Trunk
  • Figma
  • Sketch
  • Color Hex – Free encyclopedia of Color.
  • Color Tool – Provides moving designs for material Color schemes.
  • ColorDrop – a color matching tool that saves color combinations.
  • CSS3 Generator – Very clean design and user interface
  • Google Fonts – free with over 600 font families.
  • Typetester – is a quick solution that provides previews of multiple fonts on a single page.

4. Web development

  • Parcel – Fast, zero-configuration Web application bundle.
  • Feather – simple and beautiful open source icon.
  • Hyperapp V1.0-1KB library for building modern UI applications.
  • Sizzy – A tool for quickly testing responsive websites.
  • Heml – Open source markup language for building responsive email.
  • Cypress – Fast, easy, and reliable testing of what’s running in your browser.
  • FlowUp – Tracks the overall performance of your application and provides insight into key performance metrics such as FPS, memory usage, CPU usage, disk usage, etc.
  • Stetho – A powerful open source debugging platform for Android developed by Facebook.
  • Android Asset Studio – a set of easy-to-use tools for generating the various types of ICONS needed when designing and developing Android applications.
  • Android Debug Database – Debug the Android database.
  • Vysor – Allows mirroring of a real device to a computer.
  • LeakCanary – A memory leak detection library for Android and Java.
  • Android Arsenal – A classified directory of Android libraries, tools, and projects to be found.

5. Programming tools that don’t require code

  • Bubble-bubble is a Web development framework and visual programming tool. It enables non-technical people to build Web and mobile applications without code.
  • Pixate – For prototyping native mobile apps without code.
  • Webflow 3D Transformation – Visually build 3D interactions without writing any code.

6. Database tools

  • Navicat for MySQL – the fastest way to operate a database.
  • HeidiSQL: database management software.
  • Navicat Lite – Supports databases such as MySQL, Oracle, SQLite, PostgreSQL and SQL Server.
  • MySQL Workbench – a graphical database design tool.
  • Sequel Pro – Used to manage MySQL databases (locally or over the Internet).

7. Miscellaneous

  • Postman -Postman can query endpoints directly without having to write corresponding front-end queries or cURL requests.
  • Zapier – Connect applications and automate workflow.
  • Redash – a great open source tool that integrates all the most popular data sources, including MySQL, PostgreSQL, MongoDB, ElasticSearch, and more.
  • Bitbucket – Unlimited private code repository for up to five co-authors.
  • Find font – upload picture to find font.
  • Medication Assistant – Contains the latest drug instructions from manufacturers, which feels strange but may be useful (˘•ω•˘)
  • Magic List – Set up due dates and reminders, and assign to-do items so your life doesn’t get cluttered.
  • DragDis – When you come across an inspiration on the web that you want to keep, just drag and drop it onto the DragDis sidebar. Good news for amnesia
  • Universal search site – quick search – search fast one step, what search content have!

Highlights of articles:

  • Programmers organize a variety of good tools
  • I can’t go from design to development without 10 tools
  • Eight development tools used by novice Java programmers
  • Eight top tools to promote Web development
  • What database management tools do you use regularly?

That’s enough to fill your toolbox. If you have any other tools you think are good, please share them

Personal blog

More front-end technology articles, art design, wordpress plug-ins, optimization tutorials, learning notes in my personal blog Meorong – describe life with you, welcome to exchange and learn together, progress together: http://panmiaorong.top

Article recommendation:

Here are some of the top tips for interviewing in 2018

Super easy to use development tools, programmer utility collation

Dry goods sharing: Vue2.0 to do mobile terminal development used in the relevant plug-ins and experience summary

Several cross-domain schemes in the front end

Vue Axios encapsulation and API interface management

Original link:

Super easy to use development tools, programmers utility tool collation – meow rong​panmiaorong.top