Once you close or reload the page, your changes will be gone; you'll only see the changes on your computer and aren't actually editing the real website itself. That way, you can feel free to experiment and change anything—and then copy and save the very best changes to use again later. Click the "Elements" tab in the Developer Tools pane—and if you want more room, tap your "Esc" key to close the search box you had open before. You should see the HTML for this page—now you know how the sausage gets made.
In the top-left corner of the developer pane, you will see an icon of a mouse on top of a square. Click it, then you can select any element on the page that you would like to change. So let's change some things!
Ever wanted to change text on a site—perhaps to see how a new tagline would look on your homepage, or to take your email address off of a Gmail screenshot? Now you can. Click the "mouse on top of a square" icon, then click any text on the page—perhaps the tagline on the Zapier homepage. In your Developer Tools pane, you will see a line of text with a blue highlight that looks something like this:.
Double-click the "Connect Your Apps" text that's highlighted blue in the Developer Tools pane, and it will turn into an editable text field. Type anything you like in this text field "Auri is a genius" should work just fine , and press enter. You've just changed the text on the web page. Your Developer Tools pane re-loads with the page, but let's close it. Press the "X" in the top-right corner of the page. Now we're going open it back up—right at the text we want to edit. All you have to do is right-click on the part of the page you want to change, then click the Inspect or Inspect Element link that appears on the bottom of the right-click menu.
When your Developer Tools pane opens, it should automatically highlight that sentence. Pretty neat, huh? It's the little things that count. Now that we've selected the tagline on the Zapier site let's change how it looks. To the right of this sentence in the Developer Tools pane, you will see a sub-pane with 3 additional tabs: Styles, Computed, and Event Listeners.
Each allows you to change how this sentence looks on the page. Let's get started on "Styles" tab. You may notice that some things are crossed out in the "Styles" tab.
This means that these styles are not active for the element we've selected them, so changing these values will have no effect. We can ignore these for our purposes. Let's try changing something. Click the arrow icon in the top of Inspect Element again, and select the text right under the "Sign Up" button on the page. Find "text-align" in the "Styles" tab you may have to scroll a bit to find this. Right now, it is set to "center," but double-click "center" and type left.
This makes the text left-aligned on the page. Now let's play around with the color. Use the mouse icon in Inspect Element to select the button this time, then in the Styles tab find this line:. And double-click " ff4a00". Type ad do not forget the and press "enter. We just changed the color of our button from orange to blue! Now let's try something really cool. Want to see how a button or link will look once someone hovers over or clicks it? Chrome Inspect Element can show that too with its force element state tools.
Let's try this out. Make sure you've selected the signup button on the Zapier home page. Then, right-click on that code in the Elements tab, and select :active: in that menu. That will change the button to grey, which Zapier's site shows as you click the button.
Now change the background-color value to FF4A00 , and you should instantly see the button color change. Try experimenting—change the :hover: color, then un-check :hover: in the right-click menu and drag your mouse over the button to see the new button color. You can easily change images on a web page with Inspect Element, too. Now, open Inspect Element on the background of the Zapier homepage, and make sure you've selected the signup-hero line in the code.
Double-click the background URL link in the "Styles" pane, and paste the link you copied above. Note: You can also change a photo to a GIF or a video—all you need is a link to the file, and you can add it in. Editing text is handy, swapping out images is fun, and changing colors and styles just might help you quickly mockup the changes you want made to your site.
But how will that new tagline and button design look on mobile? That's where Emulation comes in—it's where everything we've reviewed so far can be applied even further. Let's see how. Everything has to be responsive today. Websites are no longer only viewed on computers—they're more likely than ever to be viewed on a phone, tablet, TV, or just about any other type of screen. That should always be kept in mind when creating new content and designs. Emulation is a great tool to approximate how websites will look to users across various devices, browsers, and even locations.
Though this does not replace actually testing on a variety of devices and browsers, it's a great start. In the Developer Tools pane, you'll notice a little phone icon in the top-left corner. Click it. This should change the page into a tiny, phone-styled page with a menu at the top to change the size.
Resize the small browser to see how things look if you were browsing on a tablet, phone, or even smaller screen. Or, click the menu at the top to select default device sizes like iPad Pro or iPhone 8 Plus —go ahead and select the latter. Go ahead enlarge the view by dragging the right edge of the web page emulation right. See what happens? We're no longer in the iPhone 8 Plus view. Dragging the screen along the grid allows you to see how the web page will change as the screen size changes, but your view will no longer reflect the device model that you chose previously.
Let's go back to the iPhone 8 Plus view by selecting this in the model drop-down list again. Next to the drop-down list is the word "Portrait. Now, we can see how this post would look if you were reading it on an iPhone 8 Plus. Feel free to play around with the other devices to see how this web page and the screen resolution changes. All of the other developer tools that we have gone over so far will also react to the device view. For example, select the text of Zapier's tagline again.
In the iPhone 8 Plus view, we can see that this text is 2em, while in the default view on a computer, it's 3em. The "em" is a font-size unit that allows you to automatically change the size of text relative to the surrounding text. For example, let's say we have a user with large custom font settings on their browser.
If you set your paragraph font-size to 14px, your font will always be 14px to that user no matter what. However, if you set your paragraph font-size to 1em, your user's browser will use this unit to scale your text to your user's large settings. Phones and tablets do this to zoom text nicely. Now let's switch to the Apple iPad view and select the "testing across devices" header above. This time, the font-size is 3em. The font-size changed based on the device view, back to the default size it'd use on a computer, thanks to the tablet's larger screen.
You may have noticed that your mouse now appears as a little circle on the web page. This allows you to interact with the page as if you are on your mobile device.
If you click while dragging the page down, this does not highlight text like it normally would in your browser—it drags the screen down like you are on a touchscreen device. Using this view, you can see how large touch zones are on a web page.
This means that you can see which buttons, icons, links, or other elements are easily touchable with the finger. You can even make your browser act like a phone. Press your "Esc" key to open the search pane in Inspect Element again, and this time click the 3-dot menu on the left side for a menu of options. Select Sensors to get three new tools: Geolocation, Orientation, and Touch. Touch lets you turn on or off the default circle selector that acts more like a finger than a normal mouse cursor.
Orientation lets you interact with motion-sensitive websites such as online games that let you move things by moving your phone. And Geolocation lets you pretend you're in a different location. Press enter on your keyboard. This is because there isn't content on this page that changes based on your location. If you change the coordinates on a site like Groupon. Go to Google. Emulation is a great way to put yourself in your user's shoes and consider what the user may be seeing on your web page—and it's a fun way to explore the international web.
You can also see what it's like to browse a site on different networks, perhaps to see if your site will load even if your users are on a slower 3G network. To give it a try, click the three circle button in the left of Inspect Element's search tab again, and select "Network Conditions".
There, you can choose from fast or slow 3G, or offline to see how the page works without internet. Or, click Add Now, reload the page, and you'll see just how long it'd take for the site to load on a slow connection—and how the site looks while it's loading. That'll show why you should improve your site to load faster on slow connections. You can also change your user agent—uncheck "Select automatically" beside "User Agent" and select "Internet Explorer 7" perhaps to see if the site changes its rendering for older browsers.
That's also a handy hack to make webpages load even if they claim they only work in a different browser like Internet Explorer. Asked 3 years, 1 month ago. Active 3 years ago. Viewed 27k times. Improve this question.
Marc Sloth Eastman. Are You using any transpilers like babel?? Yes forgot to mention that we use babel — Marc Sloth Eastman. Add a comment. Active Oldest Votes. Improve this answer. Shubhanu Sharma Shubhanu Sharma 1, 10 10 silver badges 28 28 bronze badges. I will suggest this to the team and get back to you — Marc Sloth Eastman. This isn't the answer I'm looking for actually, but thanks for trying. I am trying to find the source file path , not look at the source code in dev tools.
The code displayed in this way does not show which file the code came from — Marc Sloth Eastman. MarcSlothEastman please check i've updated the answer if this helps. This is interesting and good to know, but I don't know how to find which file an element is in in the source tab.
I need to go from the page to the source tab — Marc Sloth Eastman. Source tab you can directly go for that also there are ways then you have to master your debug skills for example adding debugger to some listeners so whenever that listener triggers it will stop at that point and gives you the file. Sign up or log in Sign up using Google. Sign up using Facebook.
Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Podcast Who is building clouds for the independent developer?
0コメント