Content Management Systems or together!
Posted: Tue Jan 21, 2025 9:08 am
The Elements tab is used to easily edit the preview page. Here we have the HTML and CSS structure of the application. Elements can be accessed by clicking in the HTML structure. At this point, the CSS styles assigned to this element are displayed on the right side.
Computed — shows the current element settings and the full list of properties assigned to this HTML element, clicking the arrow next to the parameter takes us to the settings where the CSS attribute is set.force the states of a given element, thanks to which we can preview the style for the searched state. We can choose from the following states:
active - fulfills the rule of the :active pseudo-class from the moment you hold the LMB (left mouse button) over the selected area until you release it.
hover - satisfies the :hover pseudo-class rule when the mouse cursor is currently over the element's area
focus - satisfies the rule of the :focus pseudo-class when the user has focused on a given element at a given moment (e.g. using the TAB key)
visited — Satisfies the :visited pseudo-class rule if the element is currently a visited link by the user.
Console
Used to write code or view logged messages to ensure the code is working as expected.
The console has various types of message display options:
Debugging an item
break-on -> subtree modifications — break when debugging, when the selected element is modified, the code will be broken, making it easy to find where the error occurred.
Network
Network is mainly used to verify that resources being downloaded and uploaded are as expected. We use it most often when:
we make sure that requests are downloaded and sent
we check the properties of a single query - headers, content, query result.
we check the resource loading time (we can see the loading time broken down into individual time domain types - query, TTFB - a value given in microseconds measured from the moment the query is sent to the south africa telemarketing data moment the user receives the first byte of data sent by the server)
Networki we can easily filter, you should select filter - marked funnel below. This allows us to filter the type of queries (XHR, JS, CSS, Img etc.). DevTools also has the option of simulating the connection speed - marked below.
Checking requests on the website
Performance, Memory
When creating an application, it is important to create optimal code so that the application is not overloaded. For this, use simulation and memory testing to prevent memory leaks and lower application performance.
Detailed rules for analyzing CPU and memory usage are described by Google.
Load simulation
Sources
Here we will find a full-fledged editor, in which we can edit or debug. We can add a local project here by selecting Filesystem -> Add folder to workspace, now we need to select the project folder and allow access.
All files are now available from DevTools. This speeds up our debugging work. When we have an array of objects consisting of 1000 elements, it is inconvenient to go step by step until the condition is met. At this point, we can write:
Computed — shows the current element settings and the full list of properties assigned to this HTML element, clicking the arrow next to the parameter takes us to the settings where the CSS attribute is set.force the states of a given element, thanks to which we can preview the style for the searched state. We can choose from the following states:
active - fulfills the rule of the :active pseudo-class from the moment you hold the LMB (left mouse button) over the selected area until you release it.
hover - satisfies the :hover pseudo-class rule when the mouse cursor is currently over the element's area
focus - satisfies the rule of the :focus pseudo-class when the user has focused on a given element at a given moment (e.g. using the TAB key)
visited — Satisfies the :visited pseudo-class rule if the element is currently a visited link by the user.
Console
Used to write code or view logged messages to ensure the code is working as expected.
The console has various types of message display options:
Debugging an item
break-on -> subtree modifications — break when debugging, when the selected element is modified, the code will be broken, making it easy to find where the error occurred.
Network
Network is mainly used to verify that resources being downloaded and uploaded are as expected. We use it most often when:
we make sure that requests are downloaded and sent
we check the properties of a single query - headers, content, query result.
we check the resource loading time (we can see the loading time broken down into individual time domain types - query, TTFB - a value given in microseconds measured from the moment the query is sent to the south africa telemarketing data moment the user receives the first byte of data sent by the server)
Networki we can easily filter, you should select filter - marked funnel below. This allows us to filter the type of queries (XHR, JS, CSS, Img etc.). DevTools also has the option of simulating the connection speed - marked below.
Checking requests on the website
Performance, Memory
When creating an application, it is important to create optimal code so that the application is not overloaded. For this, use simulation and memory testing to prevent memory leaks and lower application performance.
Detailed rules for analyzing CPU and memory usage are described by Google.
Load simulation
Sources
Here we will find a full-fledged editor, in which we can edit or debug. We can add a local project here by selecting Filesystem -> Add folder to workspace, now we need to select the project folder and allow access.
All files are now available from DevTools. This speeds up our debugging work. When we have an array of objects consisting of 1000 elements, it is inconvenient to go step by step until the condition is met. At this point, we can write: