|
| 1 | +# Diagnose video playback issues with DevTools |
| 2 | + |
| 3 | +## Requirements |
| 4 | + |
| 5 | +This tutorial only works on the desktop version of Firefox and Chromium based browsers (Chrome, Brave, Opera, Vivaldi, Edge and so on). |
| 6 | + |
| 7 | +## Open DevTools and get familiar with the Network tab |
| 8 | + |
| 9 | +1. Press the F12 key on your keyboard. Or Ctrl + Shift + E at the same time if F12 did not work. |
| 10 | +2. By default, this will automatically show you the "Elements" category. Click instead on the "Network" tab. |
| 11 | +3. You should see a window like this: |
| 12 | +  |
| 13 | +  |
| 14 | +4. You may not see any requests listed yet or already some active requests, follow the second part for the troubleshooting part. |
| 15 | + |
| 16 | +## Troubleshoot failed requests |
| 17 | + |
| 18 | +1. Keep the Devtools open. |
| 19 | +2. On Chromium based browser, drag the "Status" column to make it wide as much as possible. |
| 20 | +  |
| 21 | + On Firefox, drag the "Transferred" column to make it wide as much as possible. |
| 22 | +  |
| 23 | +3. Refresh the page (F5 key) and load your video again if refreshing did not play the video again. |
| 24 | +4. Every line under Name, Status, Type, Size OR "Status", "Method", "File" is a "Web Request". More info about what it is [here](https://web.archive.org/web/20241207173530/https://sourcedefense.com/glossary/web-request/). |
| 25 | +  |
| 26 | +  |
| 27 | +5. Look for lines that are in red color. For each one, read the type of request with their cause and possible solutions: |
| 28 | + |
| 29 | +### A) Request with name "videoplayback" and with Status 403 OR NS_BINDING_ABORTED |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | + |
| 35 | +#### Diagnostic |
| 36 | + |
| 37 | +On Chromium based browser, you will immediately see the status code. You can read "Cause and solutions". |
| 38 | + |
| 39 | +On Firefox, click on the line of the request. Then look for "Status" on the new section opened, if it's 403 then read the "Cause and solutions". If it is not then read the other requests types. |
| 40 | + |
| 41 | +#### Cause and solutions |
| 42 | + |
| 43 | +Please read the dedicated page here: [Videoplayback URLs that returns 403 HTTP errors](./youtube-errors-explained.md#videoplayback-urls-that-returns-403-http-errors) |
| 44 | + |
| 45 | +### B) Request with name "videoplayback" or "latest_version" or some random number/letters with "?local=true" and with Status ERR_NAME_NOT_RESOLVED OR NS_ERROR_UNKNOWN_HOST or CORS failed or NS_ERROR_CONNECTION_REFUSED or ERR_CONNECTION_REFUSED or any error starting with NS_ERROR_CONNECTION or ERR_CONNECTION |
| 46 | + |
| 47 | + |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +#### Cause |
| 54 | + |
| 55 | +Your browser can't resolve an external resource because the domain/hostname doesn't exist or no server is not listening to the port or the port is restricted. |
| 56 | + |
| 57 | +#### Solutions |
| 58 | + |
| 59 | +- Make sure you have correctly followed the post install [in the installation guide](./installation.md). |
| 60 | +- Look for possible solutions in the GitHub issues of Invidious by searching for the error message: https://github.com/iv-org/invidious/issues |
| 61 | +- If you are trying the new Invidious companion, make sure that public_url and base_url is correctly configured. Double check! |
| 62 | + |
| 63 | +### C) Request with Status 500 |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | +#### Cause |
| 69 | + |
| 70 | +The Invidious backend returned an error. |
| 71 | + |
| 72 | +#### Diagnostic |
| 73 | + |
| 74 | +Click on the line for request then go "Preview" tab and visualize the error. |
| 75 | + |
| 76 | +If it's an HTML response then you will see the error directly, if it's JSON then you might have to scroll or find more precisely the error. |
| 77 | + |
| 78 | +#### Solution |
| 79 | + |
| 80 | +Keep note of the error found using DevTools and also look at the logs of Invidious for any errors. Once done, search in the Invidious issues for possible solutions: https://github.com/iv-org/invidious/issues |
| 81 | + |
| 82 | +### D) I don't see any red lines |
| 83 | + |
| 84 | +#### Diagnostic |
| 85 | + |
| 86 | +Go to the Console tab and check the errors. If you see errors like: `The media could not be loaded, either because the server or network failed or because the format is not supported.`, then check the solutions: |
| 87 | + |
| 88 | +#### Solution(s) |
| 89 | + |
| 90 | +- If you are on Microsoft Edge or on a non-standard Firefox installation, you might be missing some codecs: https://github.com/iv-org/invidious/issues/3756 |
| 91 | +- Look for possible solutions in the GitHub issues of Invidious by searching for the error message: https://github.com/iv-org/invidious/issues |
| 92 | +- If you did not really find any solution then you might have hit a unknown bug, if that's the case then please open a bug report at https://github.com/iv-org/invidious/issues/new/choose |
| 93 | + |
| 94 | +## Export the requests done for further analysis by Invidious developers |
| 95 | + |
| 96 | +??? warning "Before sending the file to anyone!" |
| 97 | + |
| 98 | + Do not send this file to any random person. The file contains personal info and sensible info. |
| 99 | + Only share it to the people that you trust, for example to Invidious developers. |
| 100 | + Or remove yourself any personal info by editing the file. |
| 101 | + |
| 102 | +Use the following button on Chromium based browser: |
| 103 | + |
| 104 | + |
| 105 | + |
| 106 | +Or on Firefox: |
| 107 | + |
| 108 | + |
| 109 | + |
| 110 | +## Advanced troubleshooting |
| 111 | + |
| 112 | +For Chromium based browsers, I recommend following this tutorial which explains how to use the Network tab: https://developer.chrome.com/docs/devtools/overview#network |
| 113 | + |
| 114 | +And there is a video too: https://youtu.be/t1c5tNPpXjs?t=206 |
| 115 | + |
| 116 | +For Firefox, there is a dedicated guide here: https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html |
0 commit comments