Find and fix problems with the Chrome DevTools Issues tab
Find and fix problems with the Chrome DevTools Issues tab
Fed up with wading through browser messages in the console?
The Chrome DevTools Issues Panel provides a more structured, actionable approach to deprecations and other warnings from the browser.
This video shows you how to use the Issues Panel to find and fix problems with your website.
Resource:
Find and fix problems with the Chrome DevTools Issues tab → https://goo.gle/3i8icVB
Related Playlist:
Day 3 → https://goo.gle/WDL20Day3
Subscribe to the Chrome Developers → https://goo.gle/ChromeDevs
Speaker:
Sam Dutton
#webdevLIVE #DevTools event: web.dev LIVE 2020; re_ty: Publish; fullname: Sam Dutton; product: Chrome - Web - Chrome DevTools;
Content
0 -> [MUSIC PLAYING]
2.45 ->
12.74 -> SAM DUTTON: Are you fed
up with console spam, sick
16.239 -> of browser messages
that tell you problems,
18.58 -> but not how to fix them?
20.24 -> Well, the Issues tab is a
new way for Chrome DevTools
23.71 -> to help you find and fix
problems with your website.
27.25 -> Problems detected
by the browser are
29.05 -> presented in a structured
format, separate
32.08 -> from the console.
34.06 -> And that also means your
own console messages
36.32 -> don't get drowned out
by browser warnings.
39.59 -> The Issues tab aggregates
different types of problems.
42.83 -> It describes problems using
clear and simple language,
46.64 -> explains how to fix them, and
links to affected resources
50.39 -> within DevTools, and shows you
where to find further guidance.
56.52 -> So let's run through that
from start to finish.
59.21 -> First, you need a
page with problems.
61.26 -> Well, for this example, we have
a page with lots of problems.
64.819 -> Open the page in Chrome, and
then open Chrome DevTools.
68.36 -> As you can see,
issues were detected.
71.42 -> Click the Go to Issues button
in the Yellow Warning bar.
75.42 -> You can also select the Issues
tab from the More Tools menu,
79.16 -> or click on the Blue icon
at the top of DevTools.
82.7 -> Now, you might need to click
the Reload Page button,
85.79 -> since DevTools can't collect
requests while it's closed.
89.192 -> You'll notice that, for the
moment, the warnings that
91.4 -> used to show up in
the console still do,
93.8 -> as well as in the Issues tab.
96.2 -> The initial version of the
Issues tab checks for three
98.87 -> types of issue, cookie
problems, mixed content,
102.47 -> cross-origin embedder policy--
104.78 -> that's COEP issues as well.
107.3 -> Future versions will
support more issue types.
110.72 -> So click an item
in the Issues tab,
113.15 -> and you'll see
that each item has
114.59 -> four components, a headline
describing the issue,
118.07 -> a description providing the
context and the solution,
121.92 -> and an affected
resources section that
123.8 -> links to the resources within
the appropriate DevTools
126.71 -> context, such as
the network panel,
129.74 -> and also links to
further guidance.
132.98 -> Click on items within Affected
Resources to view details.
136.19 -> In this example, there is
one cookie and one request.
139.43 -> Now, the issues tab
explains problems
141.68 -> and tells you how to fix them.
143.28 -> But it can also
show you resources
145.04 -> in the appropriate context
within the DevTools themselves.
148.98 -> So click on a resource link
to view the item in context.
152.42 -> In this example, click
samesite-sandbox.glitch.me
156.29 -> to show the cookies
attached to that request.
159.08 -> Scroll to view the
item with a problem,
161.19 -> in this case, the cookie ck02.
164 -> Hover over the information icon
on the right to see the problem
166.79 -> and how to fix it.
168.23 -> You can also go the other way.
169.94 -> Right-click on an item within
DevTools to show issues
173.78 -> associated with it.
175.4 -> We'll be adding more features
to the issues tab in the future.
178.513 -> So let us know
what you think, how
179.93 -> we can improve the
Issues tab, and what
182.21 -> features you'd like to see.
184.52 -> You can comment on this
video or file bug reports
187.22 -> in crbug, which is the
engineering team's bug tracker,
191.06 -> or send a tweet to
@ChromeDevTools.
193.43 -> As ever, we really
appreciate your feedback,
196.67 -> so thanks very much.
198.35 -> [MUSIC PLAYING]
201.1 ->
Source: https://www.youtube.com/watch?v=1TbkSxQb4bI