1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-07-01 02:02:29 +02:00

Expression picker, alt text for images

gwarser 2019-08-09 10:07:45 +02:00
parent 220550faa0
commit 77cdbbd102

@ -4,11 +4,11 @@ The logger is the tool of choice to see, understand, diagnose and fix the functi
To access the logger, click on the _list_ icon of uBlock Origin's popup UI:
![Figure 1](https://user-images.githubusercontent.com/886325/62736450-a8cfdc00-ba2d-11e9-8f24-9d6004371f8c.png)
![list icon](https://user-images.githubusercontent.com/886325/62736450-a8cfdc00-ba2d-11e9-8f24-9d6004371f8c.png)
The request logger will open in a new tab (which was moved to its own window below):
![Figure 2](https://user-images.githubusercontent.com/886325/62732907-c00acb80-ba25-11e9-8206-76d7f071657e.png)
![logger window](https://user-images.githubusercontent.com/886325/62732907-c00acb80-ba25-11e9-8206-76d7f071657e.png)
The color of a row hints at how the resource was filtered:
- No color: The request for the resource was allowed to go through because it matched no filter/rule.
@ -52,7 +52,7 @@ Hold the <kbd>Shift</kbd> key while clicking the "Open the logger" icon to toggl
#### Page selector
![Figure 3](https://user-images.githubusercontent.com/886325/62740200-6ca17900-ba37-11e9-9a76-d64ef10b761d.png)
![page selector drop-down list](https://user-images.githubusercontent.com/886325/62740200-6ca17900-ba37-11e9-9a76-d64ef10b761d.png)
The drop-down selector is to display log entries which are related to a specific page. This will hide from view all log entries which are not related to the selected page. By selecting _All_ again, all log entries will be displayed again.
@ -62,7 +62,7 @@ Note in the figure above the entry named _"Tabless"_: selecting this entry allow
#### Reload
![Figure 4](https://user-images.githubusercontent.com/886325/62740268-affbe780-ba37-11e9-9144-cdc4c52370aa.png)
![reload button](https://user-images.githubusercontent.com/886325/62740268-affbe780-ba37-11e9-9144-cdc4c52370aa.png)
The big reload button aside the page selector is to force a reload of the content of the selected page. This button is enabled only for when a specific page is selected.
@ -70,7 +70,7 @@ The big reload button aside the page selector is to force a reload of the conten
#### Dom inspector
![Figure 4.5](https://user-images.githubusercontent.com/886325/62740302-c4d87b00-ba37-11e9-8d11-2fe9e1fc4d5d.png)
![code icon](https://user-images.githubusercontent.com/886325/62740302-c4d87b00-ba37-11e9-8d11-2fe9e1fc4d5d.png)
Complementary tool to the element picker.
@ -80,7 +80,7 @@ Please read more on dedicated page: ["DOM inspector"](./DOM-inspector)
#### Accessing popup UI of a specific page
![Figure 10](https://user-images.githubusercontent.com/886325/62734523-863bc400-ba29-11e9-82ce-0bf4211ea7d3.png)
![uBO icon](https://user-images.githubusercontent.com/886325/62734523-863bc400-ba29-11e9-82ce-0bf4211ea7d3.png)
By clicking this button you can access the popup UI of a specific tab.
@ -88,7 +88,7 @@ By clicking this button you can access the popup UI of a specific tab.
#### Expand
![Figure 5](https://user-images.githubusercontent.com/886325/62740377-f7827380-ba37-11e9-8be0-fef923ada0d3.png)
![arrow down icon](https://user-images.githubusercontent.com/886325/62740377-f7827380-ba37-11e9-8be0-fef923ada0d3.png)
By default log entries in the logger are collapsed so as to take no more than one line. Some log entries however might be truncated as a result. This button is to force all those entries with truncated extraneous information to be fully visible.
@ -96,7 +96,7 @@ By default log entries in the logger are collapsed so as to take no more than on
#### Void log entries
![Figure 6](https://user-images.githubusercontent.com/886325/62740422-13861500-ba38-11e9-911b-6d377afe71f8.png)
![x icon](https://user-images.githubusercontent.com/886325/62740422-13861500-ba38-11e9-911b-6d377afe71f8.png)
With "All" selected in "Page selector" if you close a tab for which there are entries in the logger, these entries will be marked as _void_, i.e. they will be faded out, to indicate the tab for these entries does not exist anymore.
@ -106,7 +106,7 @@ The `X` button in the toolbar allows you to remove those void entries from the l
#### Clear
![Figure 7](https://user-images.githubusercontent.com/886325/62740450-2c8ec600-ba38-11e9-9f6b-e6b113cd8ebe.png)
![rubber icon](https://user-images.githubusercontent.com/886325/62740450-2c8ec600-ba38-11e9-9f6b-e6b113cd8ebe.png)
This is to clear the logger, to remove all entries from the selected/filtered context (Ars Technica tab in this example).
@ -114,17 +114,25 @@ This is to clear the logger, to remove all entries from the selected/filtered co
#### Pause the logger
![Figure 7](https://user-images.githubusercontent.com/886325/62740475-46c8a400-ba38-11e9-9930-25af7d205abe.png)
TODO
![pause icon](https://user-images.githubusercontent.com/886325/62740475-46c8a400-ba38-11e9-9930-25af7d205abe.png)
***
#### Filtering the logger output
![Figure 8](https://user-images.githubusercontent.com/886325/62740615-97d89800-ba38-11e9-9b4c-869fac0d0129.png)
![expression picker drop down interface](https://user-images.githubusercontent.com/886325/62740615-97d89800-ba38-11e9-9b4c-869fac0d0129.png)
You can visually filter entries in the logger using filter expressions. Log entries which do not match _all_ filter expressions will be hidden from view. Syntax for a filter expression:
You can visually filter entries in the logger using filter expressions. Expressions can be chosen from expression picker, available by hovering mouse cursor over filter input box. Log entries which do not match _all_ filter expressions will be hidden from view.
![expression picker arrow down](https://user-images.githubusercontent.com/886325/62762761-2aedee00-ba8a-11e9-94cf-048f3751d145.png)
Clicking on arrow in the filtering input box deactivates expression picker.
![funnel icon](https://user-images.githubusercontent.com/886325/62762820-4d800700-ba8a-11e9-9c5a-186dd3cd5ee4.png)
Funnel icon toggles on/off current filter expression.
Filter can also be entered manually. Supported sytax:
- Enter `foo` to only show entries which have a string `foo`.
- Enter `|foo` to only show entries which have a field starting with `foo`.
@ -140,7 +148,7 @@ You can visually filter entries in the logger using filter expressions. Log entr
- `xhr || other |http:` means display entries which match either `xhr` or `other` and have a field which starts with `http:`.
- `!css || image` means display entries which do not match either `css` or `images` (equivalent to `!css !image` really).
- Warning: With _or_'ed expressions, the _not_ (`!`) operator can only apply to the resulting _or_'ed expression.
- A special keyword can be used to filter behind-the-scene requests: `bts`, or `|bts` for a stricter filtering.
- Enclose expression in slash `/` characters to treat it as Regular Expression.
Examples:
@ -164,9 +172,9 @@ This is useful to be sure the logger does not unduly consume a huge amount of me
You can find out from which filter list(s) a static filter originates, by simply clicking on it:
![c](https://cloud.githubusercontent.com/assets/585534/8145767/e2d4eafe-11e3-11e5-9af3-6692531403fa.png)
![mouse over log in active column](https://cloud.githubusercontent.com/assets/585534/8145767/e2d4eafe-11e3-11e5-9af3-6692531403fa.png)
![a](https://cloud.githubusercontent.com/assets/585534/8145768/e431716a-11e3-11e5-859c-794d37c7c41e.png)
![filter details dialog](https://cloud.githubusercontent.com/assets/585534/8145768/e431716a-11e3-11e5-859c-794d37c7c41e.png)
When the filter list is rendered as a link, clicking on it will bring you to the support site for that list.
@ -174,7 +182,7 @@ When the filter list is rendered as a link, clicking on it will bring you to the
#### Creating filters
![Figure 11](https://cloud.githubusercontent.com/assets/585534/8037213/8bac33f8-0dca-11e5-8610-010d0f9ed030.png)
![mouse over log in active column](https://cloud.githubusercontent.com/assets/585534/8037213/8bac33f8-0dca-11e5-8610-010d0f9ed030.png)
Clicking on the 4th cell of a log entry will give you access to the filtering tools dialog (modal), from where you can easily create dynamic URL filtering rules or just standard static filters, and launch the element picker.
@ -182,7 +190,7 @@ Clicking on the 4th cell of a log entry will give you access to the filtering to
##### Dynamic URL filtering rules
![Figure 12](https://cloud.githubusercontent.com/assets/585534/8037337/31bf8a2e-0dcb-11e5-8a23-aef78f943727.png)
![URL rule tab in details dialog](https://cloud.githubusercontent.com/assets/585534/8037337/31bf8a2e-0dcb-11e5-8a23-aef78f943727.png)
Point-and-click to create dynamic URL filtering rules. These rules are temporary by default, you need to click the padlock if you want them to be permanent. Useful to find out which network requests need to be blocked or allowed on a page in order, to fix a broken page, or to further block more useless resources from a page.
@ -192,7 +200,7 @@ See [_"Overview of uBlock's network filtering engine: details"_](./Overview-of-u
##### Static network filters
![Figure 13](https://cloud.githubusercontent.com/assets/585534/8037377/6ed2d4d4-0dcb-11e5-826c-e5109f72b86b.png)
![Static filter tab in details dialog](https://cloud.githubusercontent.com/assets/585534/8037377/6ed2d4d4-0dcb-11e5-826c-e5109f72b86b.png)
This dialog will assist you in creating static filters compatible with [ABP filter syntax](https://adblockplus.org/filter-cheatsheet). Note that creating static filters incur a significant overhead relative to dynamic URL filtering rules. Typically, you will first use dynamic URL filtering rules to quickly diagnose which network requests need to be allowed/blocked.