|
1 | 1 | # Browser SDK developer extension |
2 | 2 |
|
3 | 3 | Browser extension to investigate your Browser SDK integration. |
4 | | - |
5 | | -## Getting started |
6 | | - |
7 | | -### From the Chrome Web Store |
8 | | - |
9 | | -The extension is available to **Datadog employees** on the [Chrome Web Store](https://chrome.google.com/webstore/detail/datadog-browser-sdk-devel/boceobohkgenpcpogecpjlnmnfbdigda). |
10 | | - |
11 | | -### By loading the extension unpacked |
12 | | - |
13 | | -The packed extension is not (yet?) published publicly. You will need to clone this repository and |
14 | | -build the extension manually. |
15 | | - |
16 | | -``` |
17 | | -$ git clone https://github.com/DataDog/browser-sdk |
18 | | -$ cd browser-sdk |
19 | | -$ yarn |
20 | | -$ yarn build |
21 | | -``` |
22 | | - |
23 | | -Then, in Google Chrome: |
24 | | - |
25 | | -- Open the _Extension Management_ page by navigating to [chrome://extensions](chrome://extensions). |
26 | | -- Enable _Developer Mode_ by clicking the toggle switch next to _Developer mode_. |
27 | | -- Click the _LOAD UNPACKED_ button and select the `browser-sdk/developer-extension/dist` |
28 | | - directory. |
29 | | -- Open devtools and the extension features are located on the `Browser SDK` panel. |
30 | | - |
31 | | -## Features |
32 | | - |
33 | | -- Log events sent by the SDK in the devtools console |
34 | | -- Flush buffered events |
35 | | -- End current session |
36 | | -- Load the SDK development bundles instead of production ones |
37 | | -- Switch between `rum` and `rum-slim` bundles |
38 | | -- Retrieve Logs/RUM configuration |
39 | | - |
40 | | -## Browser compatibility |
41 | | - |
42 | | -For now, only Google Chrome is supported. |
43 | | - |
44 | | -## Usage tips |
45 | | - |
46 | | -### Event Tab |
47 | | - |
48 | | -The Event Tab contains a list of events sent by the SDK and a menu of event types for quick filtering. |
49 | | - |
50 | | -#### Search syntax |
51 | | - |
52 | | -We support a basic `key:value` search syntax, which means you can search within the limits of [RUM event structures](https://docs.datadoghq.com/real_user_monitoring/explorer/search/), such as `action.target.name:action_name`. |
53 | | - |
54 | | -We split each search key based on whitespace. To search with multiple conditions, simply add whitespace characters in between, such as: |
55 | | - |
56 | | -``` |
57 | | -type:view application.id:2 action.target.name:my_action_name |
58 | | -``` |
59 | | - |
60 | | -#### Event columns |
61 | | - |
62 | | -The Events List offers an interactive experience to visualize RUM events: |
63 | | - |
64 | | -- Drag and drop to reorder columns in the event list |
65 | | -- Remove (by clicking on `x` in the column title) or add new columns: |
66 | | - - Add a new column from searching for a field by clicking on the `+column` icon at the right side of the header row. |
67 | | - - Add a new column from values in existing columns by right clicking on any attribute in the event json. |
68 | | -- Copy queries and objects from the list by clicking on any cell |
69 | | - |
70 | | -### Info Tab |
71 | | - |
72 | | -**⚠️Don’t forget to reset everything in the Info Tab after experimenting.** |
73 | | - |
74 | | -Info tab contains information about Session and RUM SDK configurations |
75 | | - |
76 | | -- **RUM/LOGS Configuration**: edit configuration files on the fly. When configuration changes apply, the extension will automatically reload the page. But for some configurations you might want to click on End Current Session to ensure that the changes kicked in. |
77 | | -- **End current session**: manually end the current session within the extension. This will also end the current replay session. |
78 | | - |
79 | | -### Setting Tab |
80 | | - |
81 | | -> [!IMPORTANT] |
82 | | -> Don’t forget to reset everything in the Setting Tab after experimenting. |
83 | | -
|
84 | | -- **Request Interception**: override the current SDK bundle with local build, or switch between `rum` and `rum-slim` bundles on any site that is using RUM SDK. (note: if the SDK is installed from NPM, this override might not work, as it is still in an experimental stage.) |
85 | | - |
86 | | -- **Debug Mode**: This option enables debug mode from the developer extension to display errors happening in RUM and LOGS in the developer console. |
87 | | - |
88 | | -## Contribution tips |
89 | | - |
90 | | -To work on the developer extension and debug it easily: |
91 | | - |
92 | | -1. In a terminal, cd into the `developer-extension` folder. |
93 | | - |
94 | | -2. Run `yarn dev`. |
95 | | - |
96 | | -3. In Chrome, load the `developer-extension/dist` folder as an unpacked extension. |
97 | | - |
98 | | -4. After you make a change, right-click on the extension UI and “Reload frame”. |
0 commit comments