summaryrefslogtreecommitdiffstats
path: root/devtools/docs/user/measure_a_portion_of_the_page
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/docs/user/measure_a_portion_of_the_page')
-rw-r--r--devtools/docs/user/measure_a_portion_of_the_page/cursor-shown.pngbin0 -> 21017 bytes
-rw-r--r--devtools/docs/user/measure_a_portion_of_the_page/index.rst30
-rw-r--r--devtools/docs/user/measure_a_portion_of_the_page/measure-button.pngbin0 -> 7099 bytes
-rw-r--r--devtools/docs/user/measure_a_portion_of_the_page/resizable_measuring_area.pngbin0 -> 10214 bytes
4 files changed, 30 insertions, 0 deletions
diff --git a/devtools/docs/user/measure_a_portion_of_the_page/cursor-shown.png b/devtools/docs/user/measure_a_portion_of_the_page/cursor-shown.png
new file mode 100644
index 0000000000..dc0f9cde2a
--- /dev/null
+++ b/devtools/docs/user/measure_a_portion_of_the_page/cursor-shown.png
Binary files differ
diff --git a/devtools/docs/user/measure_a_portion_of_the_page/index.rst b/devtools/docs/user/measure_a_portion_of_the_page/index.rst
new file mode 100644
index 0000000000..f928163b89
--- /dev/null
+++ b/devtools/docs/user/measure_a_portion_of_the_page/index.rst
@@ -0,0 +1,30 @@
+=============================
+Measure a portion of the page
+=============================
+
+Using the **Measuring Tool** you can measure a specific area of a web page.
+
+This tool is hidden by default. To enable its button:
+
+
+- Go to the DevTools :doc:`Settings <../settings/index>`.
+- From the *Available Toolbox Buttons* check the *Measure a portion of the page* checkbox.
+
+
+You will now see the *Measure a portion of the page* button at the top right of the Toolbox, in the same place as the Settings/Options button.
+
+.. image:: measure-button.png
+ :class: center
+
+When you want to use the tool, click this button. Now when you mouse over the viewport, you'll see the mouse has a crosshair cursor with its current coordinates displayed beside it.
+
+.. image:: cursor-shown.png
+ :class: border
+
+
+When you hold the mouse button down and then drag, you'll start to draw a rectangle, with its x, y, and diagonal dimensions displayed. The units are in pixels.
+
+When you stop holding the mouse down, the rectangle that was displayed on screen when you released the button will stay there until you click again, allowing you time to take screenshots, note the information down, etc. The rectangle can also be resized later on by clicking one of the handles around it.
+
+.. image:: resizable_measuring_area.png
+ :class: border
diff --git a/devtools/docs/user/measure_a_portion_of_the_page/measure-button.png b/devtools/docs/user/measure_a_portion_of_the_page/measure-button.png
new file mode 100644
index 0000000000..83895dcda9
--- /dev/null
+++ b/devtools/docs/user/measure_a_portion_of_the_page/measure-button.png
Binary files differ
diff --git a/devtools/docs/user/measure_a_portion_of_the_page/resizable_measuring_area.png b/devtools/docs/user/measure_a_portion_of_the_page/resizable_measuring_area.png
new file mode 100644
index 0000000000..cbb3ecb668
--- /dev/null
+++ b/devtools/docs/user/measure_a_portion_of_the_page/resizable_measuring_area.png
Binary files differ