I cannot figure out how to get the HTML elements to wrap lines in Chrome dev tools. I'm working with some long and complicated SVG paths and I hate scrolling horizontally to check the other element attributes. Word wrap is checked under the settings area in chrome dev tools. Suggestions?
Looks like there is no Word Wrap available for now :( and seems like people have been asking forever, I just posted my vote for word wrap too
https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=73193
Edit: looks like it is a feature by default now (click on the three dots on the top right, then click on Settings):
This is quite an old thread, but unfortunately still relevant.
Word wrap only works in the Elements panel. From the documentation:
As with any text editor you can choose to wrap long lines of code in the Elements panel.
The link in Leon's answer actually refers to the Network panel, although several of the comments suggest that others are also looking at this more generally; e.g.
It would be good if wordwrap is offered for all content.
and ...
I would donate my left kidney for word wrap!
Anyway, if you're mainly editing html, you're in luck - just use the Elements panel instead of the Sources panel. Unfortunately, most of my editing is with JS.
So I'll open a new issue in Chromium and post a link back here, in case anyone wants to support it.
The { } in the footer while on the Network > Response tab worked beautifully to wrap my HTML.\KimBley
In Chrome's Issue 167287: Feature request: word wrap for sources panel, developers said:
[Oct 13, 2014]
We depend heavily here on codemirror capabilities.
Upstream bug: https://github.com/codemirror/CodeMirror/issues/1356
and:
[Dec 14, 2017]
I am a bit scared of the performance concerns of this. Will revisit when we have a more performant way of displaying large/minified files. [Status: Assigned → WontFix]
However, the actual work to fix that CodeMirror issue was broken down into two pieces, each with it's own bug:
Split measuring of long/huge lines – Issue #1022 (Closed on Jan 27, 2014)
Experiment with a partial algorithm for redrawing lines – Issue #2090 (still open, but sounds as though it applies regardless of word-wrap?)
So, they're worried that wrapping super-long lines would grind the editor to a halt. If you can convince them otherwise, with or without actually improving CodeMirror, they would probably be willing to add an option for wrapping in the Sources tab.
So go mess around with:
https://github.com/codemirror/CodeMirror
https://github.com/ChromeDevTools/devtools-frontend
I captured a screenshot just for clarify the "Pretty Print" option at the bottom!
Related
It has been brought to my attention that a website I'm helping out with sometimes has problems with span elements being injected. Those spans will break the whitespaces and make the text hard to read. Those spans look something like this:
<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>
The website is run with/by WordPress, but that does not seem to be the cause because the affected posts look fine and show no sign of this markup in the post editor or database.
Also, those spans only seem to occur at nighttime. I tried to nail that down, but as so often, I couldn't really verify it yet, as it did not occur again to me, not even at night. Right now everything is fine and none of these spans are present.
I'm guessing it has got something to do with night-mode in browsers (although behaviour was the same in Edge and Firefox) or the night-mode in Windows but then on the other hand I haven't noticed this on any other page yet.
So, this is somewhat strange and hard to nail down, but you'll find copied texts that contain the same markup, when you use a search engine and search for "data-contrast span". So, at least I'm not the only one with this problem.
Any ideas how to nail this down and find out what causes it?
Browser plug-ins are usually given permission to modify page source at run time. I would guess the culprit is a cross-browser extension like Night Eye or Dark Reader.
In general, adding a <span> shouldn't mess with your layout unless your CSS is changing span properties away from the browser defaults.
Option 1
You might be able to fix the issue by adding CSS to control how the layout looks:
span[data-contrast="auto"] {...}
That will select all spans that have that data attribute. Then add styling to counteract the layout issues you see. That said, since the extension is adding the code after the page renders, it may override whatever you do.
Option 2
A better solution would be to create your own dark mode. Most plugins/OS night modes won't mess with your code if you provide your own theme options. A "dark" theme is the 2020 version of being mobile responsive; you should provide it in your code or live with the consequences when users, browser makers, and operating systems make their own decisions.
If you need help creating an alternate theme, CSS Tricks has a good write up.
Since it's not clear what software they are copying from, I've personally experienced this when copying from a Word Doc that's been opened in Microsoft Teams or in SharePoint, and then pasting directly into a website's editor (our site uses the TinyMCE text editor, a commonly utilized free text editor).
My recommendation: copy directly from the desktop version of Word, then paste into the editor and that prevents the "data-contrast" spans.
I assume there must be some hidden spans in non-desktop versions of Word Docs that they add to ensure the document displays the same way as the desktop version. The text editor doesn't know what to do with it, so it strips out everything, but the "data-contrast" portion.
Hope this helps someone out there as the original post was as asked some time ago.
I've been looking for an answer for a while now and I can't seem to find any reasons why this is an issue. I have various places in my style sheets where I use cursor: pointer for UI elements like buttons and links. The majority of the time it works as I expect, but occasionally they just don't want to work. I'd love to say I have a specific example in the style sheets that would ensure replication but that's been the issue. When it happens, it's not just for one element, it's for all of them. I've experienced this across the board with modern browsers and it seems to just be completely random which makes it hard to troubleshoot.
The only thing I've been able to confirm 100% is that if it does happen, I can open developer tools, then select an element to inspect that is supposed to have the cursor: pointer and the effect begins working everywhere again. I'm not sure what's going on here and it's driving me up the wall.
Is there any documentation surrounding this issue or something similar?
I experience it in localhost.
I haven't noticed it in production.
I haven't noticed it on JS Fiddle or Codepen when creating wireframes.
Is it a localhost issue? I've even thought it may be related to something I had done prior, but it happens even as I just navigate the site while debugging, sometimes it works on one page, but come back to the same page later in the session and it may not work anymore.
I know this one's tough and there's not a lot to go on. I don't usually make posts without code, but I'm just wondering if anyone else has experienced the same or a similar issue and resolved it.
I too have experienced this. It's actually not a code issue at all. I've found that the cursor: pointer bug you're experiencing is directly related to the Visual Studio 2017 (and newer) remote debugging browser window.
Solution
In Visual Studio, disable "Enable JavaScript Debugging for ASP.NET (Chrome & IE)".
At the top of your Visual Studio window, go to Debug -> Options. The highlighted item in the screenshow below must be unchecked:
This was a feature added in 2017, and while it helps with debugging JavaScript and TypeScript, it does so by launching a plain browser window ("remote debugger"); that is, no extensions, no bookmarks, no history, etc. The remote debugging browser window seems to have its fair share of bugs.
I saw this same behavior but not while debugging through visual studio. If I hit F12 to go to the Chrome dev tools, then click on an html element. The cursor goes to the style listed according to the style sheet.
I have a Windows 7 with service pack 1, and Internet Explorer 10. And I have my site, http://www.gfcf14greendream.com/ . It looks great on Chrome, Firefox and Safari, but not in Internet Explorer. For starters, I wanted to test how my site looks using IETester, and it's a mess (please compare by clicking the link above):
The thing is, I think that maybe the issue could be that IE8 doesn't load well from <object> tags, is that it? I use three object tags to load the three white parts: header, vertical menu, and "site log" (you can see them here: http://www.gfcf14greendream.com/header.html , http://www.gfcf14greendream.com/verticalmenu.html , http://www.gfcf14greendream.com/thesitelog.html)
To load those three sites, I use the following code:
This one for the header, <object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>
This one for the menu, <object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>
And this one for the log, <center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>
Please let me know if anyone has any ideas concerning this "mess". Thank you!!
This isn't a real answer (It's a quick and careless answer at best, so don't take it too seriously)
But I just thought I'd mention that the the W3C markup validator might be useful to you if you don't already know about it.. It catches bad markup practices or errors on your page and can give you more information on how to fix them. At the time of writing, your front page alone has 10 errors and 3 warnings on it. Maybe this could point you in the right direction?
upon a quick skim of your page you don't seem to be utilising CSS properly. That is to say, that I see you are using css but you have elements on your page (use of <center> HTML tags, inline styling and things like that) that go against the grain of why CSS was invented.
If you haven't already seen the CSS zen garden, take a quick read/look at it. It should set you right on why we use CSS instead of tables and alignment tags.
(People sometimes don't get this immediately, but , click the links on the right in the zen garden. The same HTML and page content are completely restyled using one html file and seperate CSS sheets)
Good luck!
Edit:
Oh, I almost forgot to mention that internet explorer 8 doesn't have much (if at all) HTML5 compatibility. If you want to develop websites and web apps in HTML5 you'll be hard pressed to serve your I.E 8 visitors and may end up spending more time fixing bugs than you are developing the content.
Some developers are already boycotting I.E 8 entirely to usher in the new era of the web with HTML5 and CSS 3. There are a few js compatibility libraries out there (like excanvas for the new <canvas> element for example) but they don't work flawlessly and you will eventually have to draw the line somewhere. (lol. canvas.. draw line.. get it?) That being said, i did find this article and this may be useful to you:
turn-on-html5-in-ie8-or-lower
Not every website requires HTML5 and it's new technologies, but if you plan on using it for things like the <canvas> tag, Id suggest (from my own personal opinion) you forget about I.E 8 and concentrate on browsers that utilise it.
Remember that you can make checks in your HTML to see what browser version your visitor is using.
You can see if they are using an incompatible browser, and if so, you can then alert them that their software is out of date and suggest to them alternatives (such as chrome or firefox)
There's a bunch of tutorials on-line about this, here's the first decent looking one I found in a quick Google search this article covers using this technique for seperate CSS sheets but there are others that talk about the problem I mentioned in more depth and I'm sure you can probably figure out how to do it anyway once you read the article.
Either way, I'd say you've got a little bit of reading ahead of you to understand why your humble website does not work in an increasingly obsolete browser.
Again, good luck to you in your future endeavours.
Edit was too harsh:
Having looked a the site I would start by suggesting in future you think about design from a users perspective - the colour scheme you're using isn't very friendly on the eye, the red text against the green is particular troublesome to people with red/green color blindness, you also should consider how your content is presented.
End Edit:
However, regarding your IE issues.
First things first, with any work is getting a firm plan of what you hope to achieve and setting a good groundwork before starting. With HTML that means leveling the playing field with regard to browser quirks, and to achieve that, you use a reset css file.
This ensures that all browsers (as close as possible) behave in more or less the same way, regarding padding, spacing, line heights etc, and can go along way to prevent these sort of problems from happening, and allow you to achieve consitancy.
There's more info at the link below.
http://meyerweb.com/eric/tools/css/reset/
Secondly your HTML version - your declaring HTML5 but then use HTML4 values and attributes - basically your site (as pointed out above) is not valid markup.
I've found that we can use DIV as a TEXTAREA by setting contenteditable='true' and overflow='auto' (or 'scroll') (I don't care about the appearance, just the functionality), but I really can't find the solution with Google search to make it really like a TEXTAREA, the problem is related to line-spacing, when pressing enter key, the next line is too distant from the one before in DIV. When designing with DreamWeaver, if I try editing the DIV's content and pressing enter key and switch to the code window, I can see there are P tags automatically inserted. That's why the lines in DIV are too distant from each other and it can't look fine like in a TEXTAREA. I want to say that it is so ugly and awkward.
Could you please let me know how to suppress that nasty automatic insertion of P tag into DIV's content whenever pressing Enter key? Or could you give me any other solution to make the lines in DIV normal as in TEXTAREA?
Thank you very much!
Your help would be highly appreciated! (I'm just a newbie in Web programming, so please be patient!!! Thankssss!! :))
UPDATE!!!
You may all misunderstood me, when I say I press the Enter key, it is not in code editor like DreamWeaver, It is when I load the page in the browser and try typing as a normal user. That's when I test the page.
Something like this?
#myDiv p{
margin: 0px;
}
I'm not 100% sure that the margin is what is causing the line height issues, you may want to try changing height, padding, etc. until you figure it out.
I tried making a fiddle and I'm not having the same problem, line spacing looks normal to me: http://jsfiddle.net/dFzjT/
Upon closer inspection, Chrome is adding extra divs upon each newline.
Switch to edit in the code view instead of the WYSIWYG HTML editor. Then you will want to type in between the opening and closing div tags:
<div>your text here.</div>
I've found that the strange problem (which might make some of you think I'm noob?, vote down me?) was not the fault of mine, it was the fault of the browser I was using, it was Opera browser. I didn't think it renders the DIV's content that way.
After try using a different browser like Google Chrome, FireFox and it is normal now, like a TEXTAREA as I want.
Thanks!
Here's the thing.
A lot of the answers on here answer the question, but they all miss an important point.
We were all new to this at some point.
So let me give you some advice that I wish I got when I started down this road.
Learn to read the code, and your life will be easier.
It might seem daunting now, but trust in your own ability to learn, and just struggle for a few days. You'll come out on the other end with a headache and a smile.
Write the code, save, and refresh the page in your browser.
This way, you look at it in a browser.
You should also get yourself all the important browsers: Chrome, Firefox, Internet Explorer, Opera & Safari.
Learn to use a localhost server like MAMP / XAMPP / Visual Studio.
This way you can write server-side code; that way you can test, check and tweak - all without having to upload anything.
Most of all, though..
Stay away from the WYSIWYG.
They're all just bad news.
Just write your own code.
:{D
I do a decent job of formatting my HTML and keeping it clean, but every time I view source there are elements all over the place. I guess that's fine since it won't make the page load any faster or slower and makes it harder to copy, but it just looks ugly and I wish it didnt
Why?
View Source in a web browser will show exactly what the server sent to the client. If you're really formatting your HTML nicely and it doesn't look exactly the same on the client, then there's something else in the middle that's making it not line up the same, such as a server-side technology like PHP or ASP.NET which is being used to generate some of the markup.
Also it's possible you're seeing it different due to spaces. If in your development environment you're mixing spaces and tabs and have one tab equal to 4 spaces, for example, and then in the browser it might be one tab equal to 8 spaces, then things won't line up right. To fix this, either always use tabs or always use spaces. Most decent IDEs will swap between tabs and spaces automatically for you (like Visual Studio).
Some browser tools like Firebug and Chrome's Developer Tools will show the DOM tree as the browser understands it. This is a translation of the DOM back to HTML and is not likely to be the exact same as what the server sent the content. It is formatted perfectly though.
I'm not sure why your HTML is not lined up properly in your browser's View Source. It would be helpful to actually see your HTML.
Some of the common culprits include:
a mixture of tabs and manual spaces for indenting code (if you want things to look pretty, do one or the other).
possibly a mixture of Windows, Unix, and Macintosh line breaks (CR/LF), which can happen if code is edited from multiple computers. I've had issues with this, but I'm not sure if it would cause the issues you're describing; perhaps not. (I'm sure others can comment more knowledgeably on that possibility.)
your site is managed through a CMS that emits terrible HTML
It may be useful for you to look at HTML Tidy. I haven't used it yet, but I've always heard good things.