diff --git a/common/images/debugger.png b/common/images/debugger.png
new file mode 100644
index 00000000000..1934ac745a0
Binary files /dev/null and b/common/images/debugger.png differ
diff --git a/guides/v2.2/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.md b/guides/v2.2/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.md
index 9fc0d95eb35..92d52df72ff 100644
--- a/guides/v2.2/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.md
+++ b/guides/v2.2/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.md
@@ -101,7 +101,23 @@ After setting the breakpoint, refresh the page. Now, let's explore the script tr
 
 As result, you can see the input parameter values and what the function returns. Moreover, we're also able to change the function's values on the fly.
 
+### Invoking DevTools
+
+To use DevTools you can follow the previously described steps, or you can use the `debugger` keyword in your JavaScript code to invoke the browser's DevTools.
+
+```javascript
+function sum(a, b) {
+    var sum = a + b;
+    debugger;   
+    return sum;
+}
+```
+
+Then, just make sure that your method is called and wait until the debugger is paused at the specified point.
+
+![Debugger]({{ site.baseurl }}/common/images/debugger.png)
+
 ## See also
 
 [Debug using uiRegistry]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uiregistry.html#debug_uiregistry)
-[DevTools]: https://developers.google.com/web/tools/chrome-devtools/javascript/
\ No newline at end of file
+[DevTools](https://developers.google.com/web/tools/chrome-devtools/javascript/)