microsoft website development

2022.03.16

Using developer tools is the daily development of developers,But most people often use a small part of them.,Many functions are actually no one to ask。Microsoft Edge Project department as the developer's chief product manager Christian Heilmann think,Developer tools are becoming more complex and strong,To solve this problem, you need to realize,Developer tools should not expect users to become an expert,Instead, it is necessary to guide them into an expert over time.。

The following sections are selected from his recent blog post.,From himself in the use of tools、Record the experience and check the true experience of user feedback,Not only is Luo listed some developer tools,Optimized thinking is also proposed。

have to be aware of is,Herein mentioned“Chromium Browser”Refers to all use Chromium Kernel、And provide browsers for all developer tools,Including Chrome、Microsoft Edge as well as Brave etc。

Take one by one,Microsoft Edge Although it is Windows 10/11 Built-in browser,But based on Chromium Kernel development,So look similar from the perspective of platform type Chrome。Only the difference between the browser is different on the user experience and the specific service option.。Edge Developer Tools Also work closely with Google,Many working results in the product will also be bomb Chromium Kernel。finally,Some experiments mentioned below are only Microsoft Edge Be established in,Interested people can choose the corresponding Edge Windows、Mac and Linux Version verification。All right,Ado,Import the topic:

1. Console Not just “log()”

(Browsers with all included development tools follow this standard。)

no doubt,Apart from Elements Tool outside the tool,Console It can be said to be the highest integration of frequencies in the browser developer tool.。People are accustomed to adding in the code“console.log()”Debug,What happened in the end?。Of course,There is also a better way to debug scriptures.;But considering this habit is quite common,So let's talk about how to improve this experience.。

The first question is,If the product is online, the log message is not deleted.,So Console Clogging。To avoid the result of this information to find obstacles,It is best to use it fully Console Provided console message filter option。Use these options correctly guarantees good tracking capabilities,You can also shield a lot of noise。

(microsoft website development)microsoft website development

What are we recorded??

(microsoft website development)Maybe many friends are using“console.log()”Time,All are busy with the specific value、But I forgot to add some sources.。E.g,When using the following code,We will get a list of numbers,But it doesn't know the meaning of this list.。

console.log(width)
console.log(height)

Copy code

Simple way to solve this problem,It is to enclose the content you want to record with a brache.。so Console At the same time, the value and name will be recorded at the same time.。

console.log({width})
console.log({height})

Copy code

microsoft website development

Enrich your Console Glossary

microsoft website development

Apart from“console.log()”outside,You can also use other methods.。For example“console.warn()”Record warning message,use“console.info()”Record information content、use“console.error()”Record error message。This can not only change console Display content,It can also establish a differentiated recording level for the message,Big reduced filtering difficulty in recording content。

Console Error and assertion

microsoft website development

exist Console The error is displayed in the error, the error is more elapsed.,But we'd better provide seriousness tips for product maintenance or commissioners.。The interesting method introduced here is“console.assert()”,It will only record a message when meeting a specific condition。For this type of demand,In the past, everyone may be more accustomed to writing“console.log()”of“if”Statement;But here is recommended to use it directly“assert()”,This is more conducive to subsequent cleaning commissioning code。

Track things source

microsoft website development(microsoft website development)

Usually we may add“console.log(‘Called’)”Or similar expression to test whether a function is triggered。After getting a positive answer,Next, it is of course to find the root cause of the call.。At this time“console.trace()”Big show,It not only tells us which things are called、Can you tell us where the calling operation comes?。

right console Message

If you have a lot of messages, you need to record,May wish to use“console.group(‘name’)”and“console.groupEnd(‘name’)”Pack your message to Console Foldable and scalable messages,You can even set the expansion or folding packet by default。

microsoft website development

Will console A large amount of information in display and filtering into form form

If you display a lot of information directly as a log,That is absolutely caused to rose blood pressure。Good“console.talbe()”Method can console This type of array data is displayed as a table form.,Let's submit the attribute array that you want to view to filter the display content.。

E.g,We can use“let elms = document.querySelectorAll(‘:is(h1,p,script’)”Get all in the document H1、Passage and script elements,Use“console.table(elms)”Display information conclusions as forms。Due to the large amount of properties and features in different elements,So the generated form is still very difficult to read。Here we can use“console.table(elms,[‘nodeName’, ‘innerText’, ‘offsetHeight’])”Further filtering,Finally get a form that only contains the desired properties and its value。

microsoft website development

When copying and paste this information,Table structure will remain unchanged。This also makes this function into import data into Excel or Word Great tool。

Flexible use:$() and $()

(microsoft website development)Console Provide a variety of easy-to-use convenience methods,is called Console Utilitiers。Two of these very practical representatives are“$()”and“$$()”,They correspond to“document.querySelector()”and“document.querySelectorAll()”。These can not only return to what we need. nodeList,Convert result to array,Therefore, you can use it directly on the results.“map()”and“filter()”。The following code can get all links within the current document and return an array,The object only contains each link“href”and“innerText”Attribute as“url”and“text”Attributes。

$$('a').map(a => {<br> return {url: a.href, text: a.innerText}<br>})

2. You can record if you do not need source code——Live Expressions and Logpoints

(Suitable Chromium Browser)

(microsoft website development)“console.log()”Correct usage,Of course, it is placed in the code where you want to get information.。But we can also use it to learn about the code you can't access or change.。Live ExpressionsIt is a good way to record information without changing the code.。They can record changing values with amazing speed,But will not give Console Bring too much pressure、Slow speed。

Logpoints It is a special breakpoint。We can take the developer tools Sources tool Right click JavaScript Arbitrary line and set logpoint。The system will prompt us to enter you want to record the expression.,After that, you can run when the code line is running. console Get its value。So from the technical statement,We can completely web Insert in any position“console.log()”。

3. Can record outside the browser – VS Code Debugger

(Suitable Chromium Browser and VS Code)

(microsoft website development)exist Visual Studio Code When the debugging session is started,We can generate a browser instance,And through the open browser developer tool Debug Console Be Console use。

microsoft website development

4. Inject code to any site——Snippets and Overrides

(Suitable Chromium Browser)

Developer toolSnippetsIs a way to run the script for the current website。We can use them in these scriptsConsole Utilities,Further, write and store those need Console High complexity in the middle DOM Operating script。Everyone can use snippets Editor or command menu,Run the script in the window of the current document。If you are using the command menu,Please pay attention to the beginning of the command!And enter the name of the code to run。

OverridesThe role is to store a local copy for remote script.,And perform overwriting when loading。E.g,If our entire application build process is too slow,But I hope to try a little fresh design at any time.,So overrides It will play a role.。in addition,This tool can also be under the premise of the need for browser extensions.,Replace those annoying scripts in third party websites。

5. Check the richness of the debugging tool far super commandment

(Suitable Chromium Browser)

Everyone Chromium The first impression of the developer tool may come from Google Chrome、Brave or Microsoft Edge Waitage browser,But the applicable environment of these tools is far more than this。Everything is based on Electron Applications can enable these tools,How to see how the code under the hood is built。E.g,We can GitHub Desktop as well as Visual Studio Code In use,Even the developer tool itself can be used to debug the developer tool itself in the browser.。

Observe developer tools,Can see them use HTML、CSS as well as TyperScript Write。Such a technological use environment is exciting,Because we can clearly see how the code is running in the rendering engine——This is at Web End forever experience。

microsoft website development(microsoft website development)

Visual Studio Code middle Edge Developer tool

(Suitable Microsoft Edge Match VS Code Expand)

These tools also have embedded features,Therefore, you can use it outside the browser.。Microsoft Edge Tools for Visual Studio CodeExtension introduces these tools into Visual Studio Code。As a one,We can use visual debugging tools directly on the code editor,Thoroughly bid farewell to repeatedly switched troubles。In the first time,The system prompts the user to install extension;Whenever we debug the session and click the Developer Tool Icon,These tools are open。

microsoft website development

microsoft website development

6. Discover more treasure features……

After personally take care of the developer tool for a while,I have summed up a few regrettable facts from feedback.。first of all,Although we are all excited about the amazing performance of developer tools,But users often use only one of them。Many things are good,But but always lying quietly in the presentation and video tutorial.,Enthusiastic。I just started to think because the documentation is not hard enough.,So spend a lot of time updateDevToolsDocumentation,Make sure all features have a comprehensive description and explanation。But after the matter, the situation is not the case.,Most developers only have no way(In Google、Stack Overflow And even other social channels can't find an answer)Time,Will explain the document as the last life of the straw。

Developer tools are more and more complex、More and more strong——Talk about my solution

(Suitable Microsoft Edge)

over the years,Sustained browser developer tools are getting more powerful、It is difficult to close。This result is frustrating,I think we should do better.。So in my opinion,Developer tools should achieve such a goal:

Developer tools should not expect users to become an expert,It is over time to guide them into an expert.。

We are trying a series of simplified operations,The corresponding result will soon be Microsoft Edge Reflected。One of the explorations is“Focus Mode”,All tools and tabs are no longer displayed here,Instead, the tools are classified to different use cases.,E.g“Elements/CSS debugging”、“Source code/JavaScript debugging”or“Network check”Wait。Its core ideas are very simple,That is to hide all tools that may be confused or hindered,Only use tools related to current jobs。

microsoft website development

Another feature we are studying is“informational overlays”。We intend to provide a help button,Covering box for opening developer tools,Specifically explains what each tool is、How to use and list the document link。We hope that this design can help everyone understand each function more easily.。

(microsoft website development)microsoft website development

The code writing and results debugging still disconnect each other

(Suitable Microsoft Edge)

Although today's developer tools are quite perfect,But there is still a certain degree from a certain degree between creation and debugging.。in most cases,We can only write code、Create an application,After turning to the browser to see which parts do not have the need。Next,Users will use browser developer tools to adjust and fix these issues。But the biggest trouble this is coming.:How do we return a change created by the browser developer tool to the code?in most cases,The answer is only one:Copy and paste,Or note the actual modification。

We are currently studying two methods,I hope to reduce the entire debugging and modification process。One is trying to use Visual Studio Code Replace the editor in the developer tool,And directly change the files on the disk drive when the user uses the developer tool。The other is VS Code Extension,Allow everyone to directly modify the source code in the editor when using the developer tool,And clearly indicate whether to replace the real source file on the disk after completion。

finally,Christian Heilmann Call for developers to act positive feedback,“We strive to make feedback and response more convenient。E.g,Visual Studio Code Extension provides a striking link with buttons,Reference to report issues and application functions。”

Description:
https://christianheilmann.com/2021/11/01/developer-tools-secrets-that-shouldnt-be-secrets/

返回列表
更多新闻资讯

website development company american fork

2022-03-15

website development company american fork Florida, USA,What is the cost of a dynamic e-commerce website??At the data exitWe are e-commerce website designersThe company provides the best professional web design for small or large companies in

quality management plan for website development

2022-03-15

quality management plan for website development Website as a facade in the Internet promotion,Is the display of corporate image,The importance is self-evident。So how to build a high quality website?What issues need to pay attention to during websit

how to choose website development company

2022-03-15

how to choose website development company In today's fast-developing economy,Small and medium-sized enterprises have realized the importance of enterprise website to enterprise development。However,The website building market is polarized。Some