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 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.