User Interface Debugging

How to find what the User Interface is doing when you click something

If you want to determine what action the User Interface is taking when you click a button/link, you can find that information in your browser's Developer Tools.

• Open a new browser tab and visit your homepage.
• With that browser tab open, open "Developer Tools" in your browser.  This "Developer Tools" tab/window will now follow all the actions you perform in your other browser tab.
  • In Chrome, go to "More Tools → Developer Tools". 
  • In Firefox, go to "Web Developer → Web Developer Tools".
  • In Microsoft Edge, go to "More Tools → Developer Tools".
• Now, go back to your open browser tab.  Browse to the page you are interested in and click that button/link.
• Back in Developer Tools, you'll see what happened when you clicked that link
  • The "Network" tab will provide information on what requests the User Interface sent to the REST API.  Clicking any will give you the details of the request and the response. If any appear in "red", that means the REST API returned an error status. Clicking the red request will show you the exact Headers sent/returned and the error Response. 
  • If any errors occurred, you'll also see details about them in your "Console" tab.

Finding which component is generating the content on a page

Every DSpace Angular component has a corresponding <ds-*> HTML-like tag. The HTML tag is called the "selector" (or CSS selector), and it is defined in the "*.component.ts" tag using the "@Component" decorator (see Angular's Component Overview for the basics).  The key point to remember is that if you can find the "<ds-* >" tag, then it is easy to determine which component generated that tag!

So, supposing you are trying to determine which component is generating part of a DSpace page.

1. View the HTML source of the page in your browser.  Search for that section of the page.  (Or, right click on that part of the page and select "Inspect")
   1. For example, on the homepage view the source of the "Communities in DSpace" heading
2. Look for a parent HTML tag that begins with "ds-". This is the component selector!

   1. Continuing the example, if you view the source  of the "Communities in DSpace" heading, you'll see something like this (all HTML attributes have been removed to make the example more simple):

      <ds-top-level-community-list>
        <div>
          <h2> Communities in DSpace </h2>
          <p>Select a community to browse its collections.</p>
        </div>
      </ds-top-level-community-list>

   2. Based on the above HTML source, you can see that the "Communities in DSpace" header/content is coming from a component who's selector is "ds-top-level-community-list"
3. Now, search the source code (./src/app/) directories for a ".component.ts" file which includes that "ds-" tag name.  This can most easily be done in an IDE, but also could be done using command line tools (e.g. grep like this).

   1. Continuing the example, if you search the ./src/app/ directories for "ds-top-level-community-list" you'll find a match in the "src/app/home-page/top-level-community-list/top-level-community-list.component.ts" file:

      @Component({
        selector: 'ds-top-level-community-list',
        ...
      })

   2. This lets you know that to modify the display of that section of the page, you may need to edit either the "top-level-community-list.component.ts" file or it's corresponding HTML file at "top-level-community-list.component.html"
4. Once you've located the component, you can edit that component's HTML file (ending in "component.html") to change that section of the page.
   1. Keep in mind, the component's HTML file may reference other "ds-" tags!  Those are other components in DSpace which you can find again by searching the "./src/app" directories for that tag.