Getting ready

You install debug in the same way as if you wanted to use it with Node.

npm install debug --save

You will also have to decide how to namespace your logs because with debug you have an easy way to select which messages (if any) get shown and which are not displayed. Some possible ideas are to have names like MYAPP:SERVICE:LOGIN, MYAPP:SERVICE:COUNTRIES, MYAPP_SERVICE:PDF_INVOICE, and so on for each service in your application, or MYAPP_FORM:NEW_USER, MYAPP:FORM:DISPLAY_CART, MYAPP:FORM:PAY_WITH_CARD, and so on for each form, or MYAPP:COMPONENT:PERSONAL_DATA, MYAPP:COMPONENT_CART, and the like for specific components; the list can go on for actions, reducers, and so on, as you wish.

There's a way to select afterwards which logs will be shown, by storing a value in LocalStorage (we'll get to this) so you can set:

  • MYAPP:* to display all logs from my app
  • MYAPP:SERVICE:* to display all service-related logs
  • MYAPP:FORM:  and MYAPP:COMPONENT:* to display logs related to some forms or components, but omit others
  • MYAPP:SERVICE:COUNTRIES,MYAPP:FORM:NEW_USER and MYAPP:FORM:PAY_WITH_CARD to display logs related to those three items

You can also prefix a string with "-" to exclude it. MYAPP:ACTIONS:*,-MYAPP:ACTIONS:LOADING will enable all actions, but not the LOADING one.

You may wonder: why include a fixed text such as MYAPP: everywhere? The key is that many of the libraries you may use actually also use debug for logging. If you were to say to display everything (*) instead of MYAPP:*, you would get in the console every single message from all those libraries, and that's not what you expected!

You are free to decide the naming of your logs, but setting up a well-structured list will make it possible for you to pick and choose later which logs to display, meaning that you won't have to start messing around with the code to enable or disable any given set of messages.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset